@tanstack/solid-query 4.24.10 → 5.0.0-alpha.1

package/build/{solid → source}/__tests__/useIsFetching.test.jsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen, waitFor } from 'solid-testing-library';
-import { createContext, createEffect, createRenderEffect, createSignal, ErrorBoundary, Show, } from 'solid-js';
+import { createEffect, createRenderEffect, createSignal, Show } from 'solid-js';
 import { createQuery, QueryCache, QueryClientProvider, useIsFetching } from '..';
 import { createQueryClient, queryKey, setActTimeout, sleep } from './utils';
 describe('useIsFetching', () => {
@@ -14,14 +14,14 @@ describe('useIsFetching', () => {
         }
         function Query() {
             const [ready, setReady] = createSignal(false);
-            createQuery(key, async () => {
-                await sleep(50);
-                return 'test';
-            }, {
-                get enabled() {
-                    return ready();
+            createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(50);
+                    return 'test';
                 },
-            });
+                enabled: ready(),
+            }));
             return <button onClick={() => setReady(true)}>setReady</button>;
         }
         function Page() {
@@ -52,17 +52,23 @@ describe('useIsFetching', () => {
             return null;
         }
         function FirstQuery() {
-            createQuery(key1, async () => {
-                await sleep(100);
-                return 'data';
-            });
+            createQuery(() => ({
+                queryKey: key1,
+                queryFn: async () => {
+                    await sleep(150);
+                    return 'data';
+                },
+            }));
             return null;
         }
         function SecondQuery() {
-            createQuery(key2, async () => {
-                await sleep(100);
-                return 'data';
-            });
+            createQuery(() => ({
+                queryKey: key2,
+                queryFn: async () => {
+                    await sleep(200);
+                    return 'data';
+                },
+            }));
             return null;
         }
         function Page() {
@@ -70,7 +76,7 @@ describe('useIsFetching', () => {
             createEffect(() => {
                 setActTimeout(() => {
                     setRenderSecond(true);
-                }, 50);
+                }, 100);
             });
             return (<>
           <IsFetching />
@@ -92,22 +98,32 @@ describe('useIsFetching', () => {
         const key2 = queryKey();
         const isFetchings = [];
         function One() {
-            createQuery(key1, async () => {
-                await sleep(10);
-                return 'test';
-            });
+            createQuery(() => ({
+                queryKey: key1,
+                queryFn: async () => {
+                    await sleep(10);
+                    return 'test';
+                },
+            }));
             return null;
         }
         function Two() {
-            createQuery(key2, async () => {
-                await sleep(20);
-                return 'test';
-            });
+            createQuery(() => ({
+                queryKey: key2,
+                queryFn: async () => {
+                    await sleep(20);
+                    return 'test';
+                },
+            }));
             return null;
         }
         function Page() {
             const [started, setStarted] = createSignal(false);
-            const isFetching = useIsFetching(key1);
+            const isFetching = useIsFetching(() => ({
+                filters: {
+                    queryKey: key1,
+                },
+            }));
             createRenderEffect(() => {
                 isFetchings.push(isFetching());
             });
@@ -132,69 +148,17 @@ describe('useIsFetching', () => {
         // at no point should we have isFetching: 2
         expect(isFetchings).toEqual(expect.not.arrayContaining([2]));
     });
-    describe('with custom context', () => {
-        it('should update as queries start and stop fetching', async () => {
-            const context = createContext(undefined);
-            const queryCache = new QueryCache();
-            const queryClient = createQueryClient({ queryCache });
-            const key = queryKey();
-            function Page() {
-                const [ready, setReady] = createSignal(false);
-                const isFetching = useIsFetching(undefined, { context: context });
-                createQuery(key, async () => {
-                    await sleep(50);
-                    return 'test';
-                }, {
-                    get enabled() {
-                        return ready();
-                    },
-                    context,
-                });
-                return (<div>
-            <div>isFetching: {isFetching}</div>
-            <button onClick={() => setReady(true)}>setReady</button>
-          </div>);
-            }
-            render(() => (<QueryClientProvider client={queryClient} context={context}>
-          <Page />
-        </QueryClientProvider>));
-            await screen.findByText('isFetching: 0');
-            fireEvent.click(screen.getByRole('button', { name: /setReady/i }));
-            await screen.findByText('isFetching: 1');
-            await screen.findByText('isFetching: 0');
-        });
-        it('should throw if the context is not passed to useIsFetching', async () => {
-            const context = createContext(undefined);
-            const queryCache = new QueryCache();
-            const queryClient = createQueryClient({ queryCache });
-            const key = queryKey();
-            function Page() {
-                const isFetching = useIsFetching();
-                createQuery(key, async () => 'test', {
-                    enabled: true,
-                    context,
-                    useErrorBoundary: true,
-                });
-                return (<div>
-            <div>isFetching: {isFetching}</div>
-          </div>);
-            }
-            render(() => (<QueryClientProvider client={queryClient} context={context}>
-          <ErrorBoundary fallback={() => <div>error boundary</div>}>
-            <Page />
-          </ErrorBoundary>
-        </QueryClientProvider>));
-            await waitFor(() => screen.getByText('error boundary'));
-        });
-    });
     it('should show the correct fetching state when mounted after a query', async () => {
         const queryClient = createQueryClient();
         const key = queryKey();
         function Page() {
-            createQuery(key, async () => {
-                await sleep(10);
-                return 'test';
-            });
+            createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    return 'test';
+                },
+            }));
             const isFetching = useIsFetching();
             return (<div>
           <div>isFetching: {isFetching()}</div>
@@ -206,4 +170,23 @@ describe('useIsFetching', () => {
         await screen.findByText('isFetching: 1');
         await screen.findByText('isFetching: 0');
     });
+    it('should use provided custom queryClient', async () => {
+        const queryClient = createQueryClient();
+        const key = queryKey();
+        function Page() {
+            createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    return 'test';
+                },
+            }), () => queryClient);
+            const isFetching = useIsFetching(() => ({ queryClient }));
+            return (<div>
+          <div>isFetching: {isFetching}</div>
+        </div>);
+        }
+        render(() => <Page></Page>);
+        await screen.findByText('isFetching: 1');
+    });
 });

package/build/{solid → source}/__tests__/useIsMutating.test.jsx

@@ -1,7 +1,7 @@
 import { fireEvent, screen, waitFor } from 'solid-testing-library';
-import { createMutation, QueryClient, QueryClientProvider, useIsMutating, } from '..';
+import { createMutation, QueryClientProvider, useIsMutating } from '..';
 import { createQueryClient, sleep } from './utils';
-import { createContext, createEffect, createRenderEffect, createSignal, ErrorBoundary, Show, } from 'solid-js';
+import { createEffect, createRenderEffect, createSignal, Show } from 'solid-js';
 import { render } from 'solid-testing-library';
 import * as MutationCacheModule from '../../../query-core/src/mutationCache';
 import { setActTimeout } from './utils';
@@ -17,14 +17,20 @@ describe('useIsMutating', () => {
             return null;
         }
         function Mutations() {
-            const { mutate: mutate1 } = createMutation(['mutation1'], async () => {
-                await sleep(150);
-                return 'data';
-            });
-            const { mutate: mutate2 } = createMutation(['mutation2'], async () => {
-                await sleep(50);
-                return 'data';
-            });
+            const { mutate: mutate1 } = createMutation(() => ({
+                mutationKey: ['mutation1'],
+                mutationFn: async () => {
+                    await sleep(150);
+                    return 'data';
+                },
+            }));
+            const { mutate: mutate2 } = createMutation(() => ({
+                mutationKey: ['mutation2'],
+                mutationFn: async () => {
+                    await sleep(50);
+                    return 'data';
+                },
+            }));
             createEffect(() => {
                 mutate1();
                 setActTimeout(() => {
@@ -48,21 +54,29 @@ describe('useIsMutating', () => {
         const isMutatings = [];
         const queryClient = createQueryClient();
         function IsMutating() {
-            const isMutating = useIsMutating(['mutation1']);
+            const isMutating = useIsMutating(() => ({
+                filters: { mutationKey: ['mutation1'] },
+            }));
             createRenderEffect(() => {
                 isMutatings.push(isMutating());
             });
             return null;
         }
         function Page() {
-            const { mutate: mutate1 } = createMutation(['mutation1'], async () => {
-                await sleep(100);
-                return 'data';
-            });
-            const { mutate: mutate2 } = createMutation(['mutation2'], async () => {
-                await sleep(100);
-                return 'data';
-            });
+            const { mutate: mutate1 } = createMutation(() => ({
+                mutationKey: ['mutation1'],
+                mutationFn: async () => {
+                    await sleep(100);
+                    return 'data';
+                },
+            }));
+            const { mutate: mutate2 } = createMutation(() => ({
+                mutationKey: ['mutation2'],
+                mutationFn: async () => {
+                    await sleep(100);
+                    return 'data';
+                },
+            }));
             createEffect(() => {
                 mutate1();
                 mutate2();
@@ -79,23 +93,31 @@ describe('useIsMutating', () => {
         const isMutatings = [];
         const queryClient = createQueryClient();
         function IsMutating() {
-            const isMutating = useIsMutating({
-                predicate: (mutation) => mutation.options.mutationKey?.[0] === 'mutation1',
-            });
+            const isMutating = useIsMutating(() => ({
+                filters: {
+                    predicate: (mutation) => mutation.options.mutationKey?.[0] === 'mutation1',
+                },
+            }));
             createRenderEffect(() => {
                 isMutatings.push(isMutating());
             });
             return null;
         }
         function Page() {
-            const { mutate: mutate1 } = createMutation(['mutation1'], async () => {
-                await sleep(100);
-                return 'data';
-            });
-            const { mutate: mutate2 } = createMutation(['mutation2'], async () => {
-                await sleep(100);
-                return 'data';
-            });
+            const { mutate: mutate1 } = createMutation(() => ({
+                mutationKey: ['mutation1'],
+                mutationFn: async () => {
+                    await sleep(100);
+                    return 'data';
+                },
+            }));
+            const { mutate: mutate2 } = createMutation(() => ({
+                mutationKey: ['mutation2'],
+                mutationFn: async () => {
+                    await sleep(100);
+                    return 'data';
+                },
+            }));
             createEffect(() => {
                 mutate1();
                 mutate2();
@@ -129,10 +151,13 @@ describe('useIsMutating', () => {
         }
         function Page() {
             const [mounted, setMounted] = createSignal(true);
-            const { mutate: mutate1 } = createMutation(['mutation1'], async () => {
-                await sleep(10);
-                return 'data';
-            });
+            const { mutate: mutate1 } = createMutation(() => ({
+                mutationKey: ['mutation1'],
+                mutationFn: async () => {
+                    await sleep(10);
+                    return 'data';
+                },
+            }));
             createEffect(() => {
                 mutate1();
             });
@@ -152,65 +177,25 @@ describe('useIsMutating', () => {
         await sleep(20);
         MutationCacheSpy.mockRestore();
     });
-    describe('with custom context', () => {
-        it('should return the number of fetching mutations', async () => {
-            const context = createContext(undefined);
-            const isMutatings = [];
-            const queryClient = new QueryClient();
-            function IsMutating() {
-                const isMutating = useIsMutating(undefined, { context });
-                createRenderEffect(() => {
-                    isMutatings.push(isMutating());
-                });
-                return null;
-            }
-            function Page() {
-                const { mutate: mutate1 } = createMutation(['mutation1'], async () => {
-                    await sleep(150);
-                    return 'data';
-                }, { context });
-                const { mutate: mutate2 } = createMutation(['mutation2'], async () => {
-                    await sleep(50);
+    it('should use provided custom queryClient', async () => {
+        const queryClient = createQueryClient();
+        function Page() {
+            const isMutating = useIsMutating(() => ({ queryClient }));
+            const { mutate } = createMutation(() => ({
+                mutationKey: ['mutation1'],
+                mutationFn: async () => {
+                    await sleep(10);
                     return 'data';
-                }, { context });
-                createEffect(() => {
-                    mutate1();
-                    setActTimeout(() => {
-                        mutate2();
-                    }, 50);
-                });
-                return <IsMutating />;
-            }
-            render(() => (<QueryClientProvider client={queryClient} context={context}>
-          <Page />
-        </QueryClientProvider>));
-            await waitFor(() => expect(isMutatings).toEqual([0, 1, 2, 1, 0]));
-        });
-        it('should throw if the context is not passed to useIsMutating', async () => {
-            const context = createContext(undefined);
-            const isMutatings = [];
-            const queryClient = new QueryClient();
-            function IsMutating() {
-                const isMutating = useIsMutating(undefined);
-                isMutatings.push(isMutating());
-                return null;
-            }
-            function Page() {
-                const { mutate } = createMutation(['mutation'], async () => 'data', {
-                    useErrorBoundary: true,
-                    context,
-                });
-                createEffect(() => {
-                    mutate();
-                });
-                return <IsMutating />;
-            }
-            render(() => (<QueryClientProvider client={queryClient} context={context}>
-          <ErrorBoundary fallback={() => <div>error boundary</div>}>
-            <Page />
-          </ErrorBoundary>
-        </QueryClientProvider>));
-            await waitFor(() => screen.getByText('error boundary'));
-        });
+                },
+            }), () => queryClient);
+            createEffect(() => {
+                mutate();
+            });
+            return (<div>
+          <div>mutating: {isMutating}</div>
+        </div>);
+        }
+        render(() => <Page></Page>);
+        await waitFor(() => screen.findByText('mutating: 1'));
     });
 });

package/build/{solid → source}/__tests__/utils.jsx

@@ -2,8 +2,8 @@ import { QueryClient } from '@tanstack/query-core';
 import { createEffect, createSignal, onCleanup, Show } from 'solid-js';
 let queryKeyCount = 0;
 export function queryKey() {
-    const localQueryKeyCount = queryKeyCount++;
-    return () => [`query_${localQueryKeyCount}`];
+    queryKeyCount++;
+    return [`query_${queryKeyCount}`];
 }
 export const Blink = (props) => {
     const [shouldShow, setShouldShow] = createSignal(true);
@@ -17,8 +17,7 @@ export const Blink = (props) => {
     </Show>);
 };
 export function createQueryClient(config) {
-    jest.spyOn(console, 'error').mockImplementation(() => undefined);
-    return new QueryClient({ logger: mockLogger, ...config });
+    return new QueryClient(config);
 }
 export function mockVisibilityState(value) {
     return jest.spyOn(document, 'visibilityState', 'get').mockReturnValue(value);
@@ -26,11 +25,6 @@ export function mockVisibilityState(value) {
 export function mockNavigatorOnLine(value) {
     return jest.spyOn(navigator, 'onLine', 'get').mockReturnValue(value);
 }
-export const mockLogger = {
-    log: jest.fn(),
-    warn: jest.fn(),
-    error: jest.fn(),
-};
 export function sleep(timeout) {
     return new Promise((resolve, _reject) => {
         setTimeout(resolve, timeout);

package/build/source/createBaseQuery.js

@@ -0,0 +1,147 @@
+import { hydrate } from '@tanstack/query-core';
+import { notifyManager } from '@tanstack/query-core';
+import { isServer } from 'solid-js/web';
+import { createComputed, createMemo, createResource, on, onCleanup, onMount, } from 'solid-js';
+import { createStore, unwrap } from 'solid-js/store';
+import { useQueryClient } from './QueryClientProvider';
+import { shouldThrowError } from './utils';
+// Base Query Function that is used to create the query.
+export function createBaseQuery(options, Observer, queryClient) {
+    const client = createMemo(() => useQueryClient(queryClient?.()));
+    const defaultedOptions = client().defaultQueryOptions(options());
+    defaultedOptions._optimisticResults = 'optimistic';
+    if (isServer) {
+        defaultedOptions.retry = false;
+        defaultedOptions.throwErrors = true;
+    }
+    const observer = new Observer(client(), defaultedOptions);
+    const [state, setState] = createStore(observer.getOptimisticResult(defaultedOptions));
+    const createServerSubscriber = (resolve, reject) => {
+        return observer.subscribe((result) => {
+            notifyManager.batchCalls(() => {
+                const unwrappedResult = { ...unwrap(result) };
+                if (unwrappedResult.isError) {
+                    if (process.env['NODE_ENV'] === 'development') {
+                        console.error(unwrappedResult.error);
+                    }
+                    reject(unwrappedResult.error);
+                }
+                if (unwrappedResult.isSuccess) {
+                    resolve(unwrappedResult);
+                }
+            })();
+        });
+    };
+    const createClientSubscriber = () => {
+        return observer.subscribe((result) => {
+            notifyManager.batchCalls(() => {
+                const unwrappedResult = { ...unwrap(result) };
+                // If the query has data we dont suspend but instead mutate the resource
+                // This could happen when placeholderData/initialData is defined
+                if (queryResource()?.data &&
+                    unwrappedResult.data &&
+                    !queryResource.loading) {
+                    setState(unwrappedResult);
+                    mutate(state);
+                }
+                else {
+                    setState(unwrappedResult);
+                    refetch();
+                }
+            })();
+        });
+    };
+    /**
+     * Unsubscribe is set lazily, so that we can subscribe after hydration when needed.
+     */
+    let unsubscribe = null;
+    const [queryResource, { refetch, mutate }] = createResource(() => {
+        return new Promise((resolve, reject) => {
+            if (isServer) {
+                unsubscribe = createServerSubscriber(resolve, reject);
+            }
+            else {
+                if (!unsubscribe) {
+                    unsubscribe = createClientSubscriber();
+                }
+            }
+            if (!state.isLoading) {
+                resolve(state);
+            }
+        });
+    }, {
+        initialValue: state,
+        // If initialData is provided, we resolve the resource immediately
+        ssrLoadFrom: options().initialData ? 'initial' : 'server',
+        get deferStream() {
+            return options().deferStream;
+        },
+        /**
+         * If this resource was populated on the server (either sync render, or streamed in over time), onHydrated
+         * will be called. This is the point at which we can hydrate the query cache state, and setup the query subscriber.
+         *
+         * Leveraging onHydrated allows us to plug into the async and streaming support that solidjs resources already support.
+         *
+         * Note that this is only invoked on the client, for queries that were originally run on the server.
+         */
+        onHydrated(_k, info) {
+            if (info.value) {
+                hydrate(client(), {
+                    queries: [
+                        {
+                            queryKey: defaultedOptions.queryKey,
+                            queryHash: defaultedOptions.queryHash,
+                            state: info.value,
+                        },
+                    ],
+                });
+            }
+            if (!unsubscribe) {
+                /**
+                 * Do not refetch query on mount if query was fetched on server,
+                 * even if `staleTime` is not set.
+                 */
+                const newOptions = { ...defaultedOptions };
+                if (defaultedOptions.staleTime || !defaultedOptions.initialData) {
+                    newOptions.refetchOnMount = false;
+                }
+                // Setting the options as an immutable object to prevent
+                // wonky behavior with observer subscriptions
+                observer.setOptions(newOptions);
+                setState(observer.getOptimisticResult(newOptions));
+                unsubscribe = createClientSubscriber();
+            }
+        },
+    });
+    onCleanup(() => {
+        if (unsubscribe) {
+            unsubscribe();
+            unsubscribe = null;
+        }
+    });
+    onMount(() => {
+        observer.setOptions(defaultedOptions, { listeners: false });
+    });
+    createComputed(() => {
+        observer.setOptions(client().defaultQueryOptions(options()));
+    });
+    createComputed(on(() => state.status, () => {
+        if (state.isError &&
+            !state.isFetching &&
+            shouldThrowError(observer.options.throwErrors, [
+                state.error,
+                observer.getCurrentQuery(),
+            ])) {
+            throw state.error;
+        }
+    }));
+    const handler = {
+        get(target, prop) {
+            if (prop === 'data') {
+                return queryResource()?.data;
+            }
+            return Reflect.get(target, prop);
+        },
+    };
+    return new Proxy(state, handler);
+}

package/build/source/createInfiniteQuery.js

@@ -0,0 +1,8 @@
+import { InfiniteQueryObserver } from '@tanstack/query-core';
+import { createBaseQuery } from './createBaseQuery';
+import { createMemo } from 'solid-js';
+export function createInfiniteQuery(options, queryClient) {
+    return createBaseQuery(createMemo(() => options()), 
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+    InfiniteQueryObserver, queryClient);
+}

package/build/{solid → source}/createMutation.js

@@ -1,12 +1,12 @@
-import { parseMutationArgs, MutationObserver } from '@tanstack/query-core';
+import { MutationObserver } from '@tanstack/query-core';
 import { useQueryClient } from './QueryClientProvider';
 import { createComputed, onCleanup, on } from 'solid-js';
 import { createStore } from 'solid-js/store';
 import { shouldThrowError } from './utils';
-export function createMutation(arg1, arg2, arg3) {
-    const [options, setOptions] = createStore(parseMutationArgs(arg1, arg2, arg3));
-    const queryClient = useQueryClient({ context: options.context });
-    const observer = new MutationObserver(queryClient, options);
+// HOOK
+export function createMutation(options, queryClient) {
+    const client = useQueryClient(queryClient?.());
+    const observer = new MutationObserver(client, options());
     const mutate = (variables, mutateOptions) => {
         observer.mutate(variables, mutateOptions).catch(noop);
     };
@@ -16,13 +16,11 @@ export function createMutation(arg1, arg2, arg3) {
         mutateAsync: observer.getCurrentResult().mutate,
     });
     createComputed(() => {
-        const newParsedOptions = parseMutationArgs(arg1, arg2, arg3);
-        setOptions(newParsedOptions);
-        observer.setOptions(newParsedOptions);
+        observer.setOptions(options());
     });
     createComputed(on(() => state.status, () => {
         if (state.isError &&
-            shouldThrowError(observer.options.useErrorBoundary, [state.error])) {
+            shouldThrowError(observer.options.throwErrors, [state.error])) {
             throw state.error;
         }
     }));