@tanstack/svelte-query 4.39.0 → 4.39.1

package/build/lib/Hydrate.svelte

@@ -0,0 +1,7 @@
+<script>import { useHydrate } from "./useHydrate";
+export let state;
+export let options = void 0;
+useHydrate(state, options);
+</script>
+
+<slot />

package/build/lib/Hydrate.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { DehydratedState, HydrateOptions } from '@tanstack/query-core';
+import type { HydrateOptions } from '@tanstack/query-core';
 declare const __propDef: {
     props: {
         state: DehydratedState;

package/build/lib/QueryClientProvider.svelte

@@ -0,0 +1,14 @@
+<script>import { onDestroy, onMount } from "svelte";
+import { QueryClient } from "@tanstack/query-core";
+import { setQueryClientContext } from "./context";
+export let client = new QueryClient();
+onMount(() => {
+  client.mount();
+});
+setQueryClientContext(client);
+onDestroy(() => {
+  client.unmount();
+});
+</script>
+
+<slot />

package/build/lib/QueryClientProvider.svelte.d.ts

@@ -1,8 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
-import { QueryClient } from '@tanstack/query-core';
 declare const __propDef: {
     props: {
-        client?: QueryClient | undefined;
+        client?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/build/lib/__tests__/CreateMutation.svelte

@@ -0,0 +1,10 @@
+<script>import { QueryClient } from "@tanstack/query-core";
+import { setQueryClientContext } from "../context";
+import { createMutation } from "../createMutation";
+export let options;
+const queryClient = new QueryClient();
+setQueryClientContext(queryClient);
+const mutation = createMutation(options);
+</script>
+
+<button on:click={() => $mutation.mutate()}>Click</button>

package/build/lib/__tests__/CreateQueries.svelte

@@ -0,0 +1,14 @@
+<script>import { QueryClient } from "@tanstack/query-core";
+import { setQueryClientContext } from "../context";
+import { createQueries } from "../createQueries";
+export let options;
+const queryClient = new QueryClient();
+setQueryClientContext(queryClient);
+const queries = createQueries(options);
+</script>
+
+{#each $queries as query}
+  {#if query.isSuccess}
+    <p>{query.data}</p>
+  {/if}
+{/each}

package/build/lib/__tests__/CreateQuery.svelte

@@ -0,0 +1,16 @@
+<script>import { QueryClient } from "@tanstack/query-core";
+import { setQueryClientContext } from "../context";
+import { createQuery } from "../createQuery";
+export let options;
+const queryClient = new QueryClient();
+setQueryClientContext(queryClient);
+const query = createQuery(options);
+</script>
+
+{#if $query.isLoading}
+  <p>Loading</p>
+{:else if $query.isError}
+  <p>Error</p>
+{:else if $query.isSuccess}
+  <p>Success</p>
+{/if}

package/build/lib/__tests__/createMutation.test.js

@@ -0,0 +1,19 @@
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, waitFor } from '@testing-library/svelte';
+import CreateMutation from './CreateMutation.svelte';
+describe('createMutation', () => {
+    it('Call mutate and check function runs', async () => {
+        const mutationFn = vi.fn();
+        const rendered = render(CreateMutation, {
+            props: {
+                options: {
+                    mutationFn,
+                },
+            },
+        });
+        fireEvent.click(rendered.getByRole('button'));
+        await waitFor(() => {
+            expect(mutationFn).toHaveBeenCalledTimes(1);
+        });
+    });
+});

package/build/lib/__tests__/createQueries.test.js

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import { render, waitFor } from '@testing-library/svelte';
+import CreateQueries from './CreateQueries.svelte';
+import { sleep } from './utils';
+describe('createQueries', () => {
+    it('Render and wait for success', async () => {
+        const rendered = render(CreateQueries, {
+            props: {
+                options: [
+                    {
+                        queryKey: ['key-1'],
+                        queryFn: async () => {
+                            await sleep(10);
+                            return 'Success 1';
+                        },
+                    },
+                    {
+                        queryKey: ['key-2'],
+                        queryFn: async () => {
+                            await sleep(10);
+                            return 'Success 2';
+                        },
+                    },
+                ],
+            },
+        });
+        await waitFor(() => {
+            expect(rendered.queryByText('Success 1')).not.toBeInTheDocument();
+            expect(rendered.queryByText('Success 2')).not.toBeInTheDocument();
+        });
+        await waitFor(() => {
+            expect(rendered.queryByText('Success 1')).toBeInTheDocument();
+            expect(rendered.queryByText('Success 2')).toBeInTheDocument();
+        });
+    });
+});

package/build/lib/__tests__/createQuery.test.js

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest';
+import { render, waitFor } from '@testing-library/svelte';
+import CreateQuery from './CreateQuery.svelte';
+import { sleep } from './utils';
+describe('createQuery', () => {
+    it('Render and wait for success', async () => {
+        const rendered = render(CreateQuery, {
+            props: {
+                options: {
+                    queryKey: ['test'],
+                    queryFn: async () => {
+                        await sleep(10);
+                        return 'Success';
+                    },
+                },
+            },
+        });
+        await waitFor(() => {
+            expect(rendered.getByText('Loading')).toBeInTheDocument();
+        });
+        await waitFor(() => {
+            expect(rendered.getByText('Success')).toBeInTheDocument();
+        });
+    });
+});

package/build/lib/__tests__/utils.js

@@ -0,0 +1,54 @@
+import { vi } from 'vitest';
+import { act } from '@testing-library/svelte';
+import { QueryClient, } from '../index';
+export function createQueryClient(config) {
+    vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    return new QueryClient({ logger: mockLogger, ...config });
+}
+export function mockVisibilityState(value) {
+    return vi.spyOn(document, 'visibilityState', 'get').mockReturnValue(value);
+}
+export function mockNavigatorOnLine(value) {
+    return vi.spyOn(navigator, 'onLine', 'get').mockReturnValue(value);
+}
+export const mockLogger = {
+    log: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+};
+let queryKeyCount = 0;
+export function queryKey() {
+    queryKeyCount++;
+    return [`query_${queryKeyCount}`];
+}
+export function sleep(timeout) {
+    return new Promise((resolve, _reject) => {
+        setTimeout(resolve, timeout);
+    });
+}
+export async function simplefetcher() {
+    await sleep(10);
+    return 'test';
+}
+export function setActTimeout(fn, ms) {
+    return setTimeout(() => {
+        act(() => {
+            fn();
+        });
+    }, ms);
+}
+/**
+ * Assert the parameter is of a specific type.
+ */
+export function expectType(_) {
+    return undefined;
+}
+/**
+ * Assert the parameter is not typed as `any`
+ */
+export function expectTypeNotAny(_) {
+    return undefined;
+}
+export function executeMutation(queryClient, options) {
+    return queryClient.getMutationCache().build(queryClient, options).execute();
+}

package/build/lib/context.d.ts

@@ -1,4 +1,3 @@
-import type { QueryClient } from '@tanstack/query-core';
 /** Retrieves a Client from Svelte's context */
 export declare const getQueryClientContext: () => QueryClient;
 /** Sets a QueryClient on Svelte's context */

package/build/lib/context.js

@@ -0,0 +1,14 @@
+import { getContext, setContext } from 'svelte';
+const _contextKey = '$$_queryClient';
+/** Retrieves a Client from Svelte's context */
+export const getQueryClientContext = () => {
+    const client = getContext(_contextKey);
+    if (!client) {
+        throw new Error('No QueryClient was found in Svelte context. Did you forget to wrap your component with QueryClientProvider?');
+    }
+    return client;
+};
+/** Sets a QueryClient on Svelte's context */
+export const setQueryClientContext = (client) => {
+    setContext(_contextKey, client);
+};

package/build/lib/createBaseQuery.js

@@ -0,0 +1,35 @@
+import { notifyManager, } from '@tanstack/query-core';
+import { derived, readable } from 'svelte/store';
+import { useQueryClient } from './useQueryClient';
+export function createBaseQuery(options, Observer) {
+    const queryClient = useQueryClient();
+    const defaultedOptions = queryClient.defaultQueryOptions(options);
+    defaultedOptions._optimisticResults = 'optimistic';
+    let observer = new Observer(queryClient, defaultedOptions);
+    // Include callbacks in batch renders
+    if (defaultedOptions.onError) {
+        defaultedOptions.onError = notifyManager.batchCalls(defaultedOptions.onError);
+    }
+    if (defaultedOptions.onSuccess) {
+        defaultedOptions.onSuccess = notifyManager.batchCalls(defaultedOptions.onSuccess);
+    }
+    if (defaultedOptions.onSettled) {
+        defaultedOptions.onSettled = notifyManager.batchCalls(defaultedOptions.onSettled);
+    }
+    readable(observer).subscribe(($observer) => {
+        observer = $observer;
+        // Do not notify on updates because of changes in the options because
+        // these changes should already be reflected in the optimistic result.
+        observer.setOptions(defaultedOptions, { listeners: false });
+    });
+    const result = readable(observer.getCurrentResult(), (set) => {
+        return observer.subscribe(notifyManager.batchCalls(set));
+    });
+    const { subscribe } = derived(result, ($result) => {
+        $result = observer.getOptimisticResult(defaultedOptions);
+        return !defaultedOptions.notifyOnChangeProps
+            ? observer.trackResult($result)
+            : $result;
+    });
+    return { subscribe };
+}

package/build/lib/createInfiniteQuery.js

@@ -0,0 +1,6 @@
+import { InfiniteQueryObserver, parseQueryArgs, } from '@tanstack/query-core';
+import { createBaseQuery } from './createBaseQuery';
+export function createInfiniteQuery(arg1, arg2, arg3) {
+    const options = parseQueryArgs(arg1, arg2, arg3);
+    return createBaseQuery(options, InfiniteQueryObserver);
+}

package/build/lib/createMutation.js

@@ -0,0 +1,27 @@
+import { derived, readable } from 'svelte/store';
+import { MutationObserver, notifyManager, parseMutationArgs, } from '@tanstack/query-core';
+import { useQueryClient } from './useQueryClient';
+export function createMutation(arg1, arg2, arg3) {
+    const options = parseMutationArgs(arg1, arg2, arg3);
+    const queryClient = useQueryClient();
+    let observer = new MutationObserver(queryClient, options);
+    let mutate;
+    readable(observer).subscribe(($observer) => {
+        observer = $observer;
+        mutate = (variables, mutateOptions) => {
+            observer.mutate(variables, mutateOptions).catch(noop);
+        };
+        observer.setOptions(options);
+    });
+    const result = readable(observer.getCurrentResult(), (set) => {
+        return observer.subscribe(notifyManager.batchCalls((val) => set(val)));
+    });
+    const { subscribe } = derived(result, ($result) => ({
+        ...$result,
+        mutate,
+        mutateAsync: $result.mutate,
+    }));
+    return { subscribe };
+}
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function noop() { }

package/build/lib/createQueries.js

@@ -0,0 +1,27 @@
+import { QueriesObserver, notifyManager } from '@tanstack/query-core';
+import { readable } from 'svelte/store';
+import { useQueryClient } from './useQueryClient';
+export function createQueries(queries) {
+    const client = useQueryClient();
+    // const isRestoring = useIsRestoring()
+    function getDefaultQuery(newQueries) {
+        return newQueries.map((options) => {
+            const defaultedOptions = client.defaultQueryOptions(options);
+            // Make sure the results are already in fetching state before subscribing or updating options
+            defaultedOptions._optimisticResults = 'optimistic';
+            return defaultedOptions;
+        });
+    }
+    const defaultedQueries = getDefaultQuery(queries);
+    let observer = new QueriesObserver(client, defaultedQueries);
+    readable(observer).subscribe(($observer) => {
+        observer = $observer;
+        // Do not notify on updates because of changes in the options because
+        // these changes should already be reflected in the optimistic result.
+        observer.setQueries(defaultedQueries, { listeners: false });
+    });
+    const { subscribe } = readable(observer.getOptimisticResult(defaultedQueries), (set) => {
+        return observer.subscribe(notifyManager.batchCalls(set));
+    });
+    return { subscribe };
+}

package/build/lib/createQuery.js

@@ -0,0 +1,7 @@
+import { QueryObserver, parseQueryArgs } from '@tanstack/query-core';
+import { createBaseQuery } from './createBaseQuery';
+export function createQuery(arg1, arg2, arg3) {
+    const parsedOptions = parseQueryArgs(arg1, arg2, arg3);
+    const result = createBaseQuery(parsedOptions, QueryObserver);
+    return result;
+}

package/build/lib/index.js

@@ -0,0 +1,16 @@
+/* istanbul ignore file */
+// Re-export core
+export * from '@tanstack/query-core';
+// Svelte Query
+export * from './types';
+export * from './context';
+export { createQuery } from './createQuery';
+export { createQueries } from './createQueries';
+export { createInfiniteQuery } from './createInfiniteQuery';
+export { createMutation } from './createMutation';
+export { useQueryClient } from './useQueryClient';
+export { useIsFetching } from './useIsFetching';
+export { useIsMutating } from './useIsMutating';
+export { useHydrate } from './useHydrate';
+export { default as Hydrate } from './Hydrate.svelte';
+export { default as QueryClientProvider } from './QueryClientProvider.svelte';

package/build/lib/types.js

@@ -0,0 +1 @@
+export {};

package/build/lib/useHydrate.js

@@ -0,0 +1,8 @@
+import { hydrate, } from '@tanstack/query-core';
+import { useQueryClient } from './useQueryClient';
+export function useHydrate(state, options) {
+    const client = useQueryClient();
+    if (state) {
+        hydrate(client, state, options);
+    }
+}

package/build/lib/useIsFetching.js

@@ -0,0 +1,21 @@
+import { notifyManager, parseFilterArgs, } from '@tanstack/query-core';
+import { readable } from 'svelte/store';
+import { useQueryClient } from './useQueryClient';
+export function useIsFetching(arg1, arg2) {
+    const [filters] = parseFilterArgs(arg1, arg2);
+    const client = useQueryClient();
+    const cache = client.getQueryCache();
+    // isFetching is the prev value initialized on mount *
+    let isFetching = client.isFetching(filters);
+    const { subscribe } = readable(isFetching, (set) => {
+        return cache.subscribe(notifyManager.batchCalls(() => {
+            const newIsFetching = client.isFetching(filters);
+            if (isFetching !== newIsFetching) {
+                // * and update with each change
+                isFetching = newIsFetching;
+                set(isFetching);
+            }
+        }));
+    });
+    return { subscribe };
+}

package/build/lib/useIsMutating.js

@@ -0,0 +1,21 @@
+import { notifyManager, parseMutationFilterArgs, } from '@tanstack/query-core';
+import { readable } from 'svelte/store';
+import { useQueryClient } from './useQueryClient';
+export function useIsMutating(arg1, arg2) {
+    const [filters] = parseMutationFilterArgs(arg1, arg2);
+    const client = useQueryClient();
+    const cache = client.getMutationCache();
+    // isMutating is the prev value initialized on mount *
+    let isMutating = client.isMutating(filters);
+    const { subscribe } = readable(isMutating, (set) => {
+        return cache.subscribe(notifyManager.batchCalls(() => {
+            const newIisMutating = client.isMutating(filters);
+            if (isMutating !== newIisMutating) {
+                // * and update with each change
+                isMutating = newIisMutating;
+                set(isMutating);
+            }
+        }));
+    });
+    return { subscribe };
+}

package/build/lib/useQueryClient.js

@@ -0,0 +1,5 @@
+import { getQueryClientContext } from './context';
+export function useQueryClient() {
+    const queryClient = getQueryClientContext();
+    return queryClient;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-query",
-  "version": "4.39.0",
+  "version": "4.39.1",
   "description": "Primitives for managing, caching and syncing asynchronous and remote data in Svelte",
   "author": "Lachlan Collins",
   "license": "MIT",
@@ -48,7 +48,7 @@
     "vitest": "^0.27.1"
   },
   "dependencies": {
-    "@tanstack/query-core": "4.39.0"
+    "@tanstack/query-core": "4.39.1"
   },
   "peerDependencies": {
     "svelte": ">=3 <5"