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

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

@@ -11,16 +11,19 @@ describe("useQuery's in Suspense mode", () => {
         let count = 0;
         let renders = 0;
         function Page() {
-            const [stateKey, setStateKey] = createSignal(key());
-            const state = createQuery(stateKey, async () => {
-                count++;
-                await sleep(10);
-                return count;
-            }, { suspense: true });
+            const [stateKey, setStateKey] = createSignal(key);
+            const state = createQuery(() => ({
+                queryKey: stateKey(),
+                queryFn: async () => {
+                    count++;
+                    await sleep(10);
+                    return count;
+                },
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
-            createRenderEffect(on([() => ({ ...state }), key], () => {
+            createRenderEffect(on([() => ({ ...state }), () => key], () => {
                 renders++;
             }));
             return (<div>
@@ -37,9 +40,6 @@ describe("useQuery's in Suspense mode", () => {
         fireEvent.click(screen.getByLabelText('toggle'));
         await waitFor(() => screen.getByText('data: 2'));
         expect(renders).toBe(4);
-        // TODO(lukemurray): verify that this expectation is valid. this is 2 in
-        // react, but 4 in solid, because in solid suspense is triggered on read and
-        // the component needs to render in order to trigger suspense.
         expect(states.length).toBe(4);
         expect(states[1]).toMatchObject({ data: 1, status: 'success' });
         expect(states[3]).toMatchObject({ data: 2, status: 'success' });
@@ -49,13 +49,16 @@ describe("useQuery's in Suspense mode", () => {
         const states = [];
         function Page() {
             const [multiplier, setMultiplier] = createSignal(1);
-            const state = createInfiniteQuery(() => [`${key()}_${multiplier()}`], async ({ pageParam = 1 }) => {
-                await sleep(10);
-                return Number(pageParam * multiplier());
-            }, {
+            const state = createInfiniteQuery(() => ({
+                queryKey: [`${key}_${multiplier()}`],
+                queryFn: async ({ pageParam }) => {
+                    await sleep(10);
+                    return Number(pageParam * multiplier());
+                },
+                defaultPageParam: 1,
                 suspense: true,
                 getNextPageParam: (lastPage) => lastPage + 1,
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -74,7 +77,7 @@ describe("useQuery's in Suspense mode", () => {
         // occurs on read.
         expect(states.length).toBe(2);
         expect(states[1]).toMatchObject({
-            data: { pages: [1], pageParams: [undefined] },
+            data: { pages: [1], pageParams: [1] },
             status: 'success',
         });
         fireEvent.click(screen.getByText('next'));
@@ -82,7 +85,7 @@ describe("useQuery's in Suspense mode", () => {
         // TODO(lukemurray): in react this is 2 and in solid it is 4
         expect(states.length).toBe(4);
         expect(states[3]).toMatchObject({
-            data: { pages: [2], pageParams: [undefined] },
+            data: { pages: [2], pageParams: [1] },
             status: 'success',
         });
     });
@@ -94,7 +97,7 @@ describe("useQuery's in Suspense mode", () => {
             return 'data';
         });
         function Page() {
-            createQuery(() => [key()], queryFn, { suspense: true });
+            createQuery(() => ({ queryKey: [key], queryFn, suspense: true }));
             return <>rendered</>;
         }
         render(() => (<QueryClientProvider client={queryClient}>
@@ -108,10 +111,13 @@ describe("useQuery's in Suspense mode", () => {
     it('should remove query instance when component unmounted', async () => {
         const key = queryKey();
         function Page() {
-            createQuery(key, () => {
-                sleep(10);
-                return 'data';
-            }, { suspense: true });
+            createQuery(() => ({
+                queryKey: key,
+                queryFn: () => {
+                    sleep(10);
+                    return 'data';
+                },
+            }));
             return <>rendered</>;
         }
         function App() {
@@ -125,26 +131,28 @@ describe("useQuery's in Suspense mode", () => {
         <App />
       </QueryClientProvider>));
         expect(screen.queryByText('rendered')).toBeNull();
-        expect(queryCache.find(key())).toBeFalsy();
+        expect(queryCache.find({ queryKey: key })).toBeFalsy();
         fireEvent.click(screen.getByLabelText('toggle'));
         await waitFor(() => screen.getByText('rendered'));
-        expect(queryCache.find(key())?.getObserversCount()).toBe(1);
+        expect(queryCache.find({ queryKey: key })?.getObserversCount()).toBe(1);
         fireEvent.click(screen.getByLabelText('toggle'));
         expect(screen.queryByText('rendered')).toBeNull();
-        expect(queryCache.find(key())?.getObserversCount()).toBe(0);
+        expect(queryCache.find({ queryKey: key })?.getObserversCount()).toBe(0);
     });
     it('should call onSuccess on the first successful call', async () => {
         const key = queryKey();
         const successFn = jest.fn();
         function Page() {
-            createQuery(() => [key()], async () => {
-                await sleep(10);
-                return key();
-            }, {
+            createQuery(() => ({
+                queryKey: [key],
+                queryFn: async () => {
+                    await sleep(10);
+                    return key;
+                },
                 suspense: true,
                 select: () => 'selected',
                 onSuccess: successFn,
-            });
+            }));
             return <>rendered</>;
         }
         render(() => (<QueryClientProvider client={queryClient}>
@@ -161,23 +169,25 @@ describe("useQuery's in Suspense mode", () => {
         const successFn1 = jest.fn();
         const successFn2 = jest.fn();
         function FirstComponent() {
-            createQuery(key, () => {
-                sleep(10);
-                return 'data';
-            }, {
-                suspense: true,
+            createQuery(() => ({
+                queryKey: key,
+                queryFn: () => {
+                    sleep(10);
+                    return 'data';
+                },
                 onSuccess: successFn1,
-            });
+            }));
             return <span>first</span>;
         }
         function SecondComponent() {
-            createQuery(key, () => {
-                sleep(10);
-                return 'data';
-            }, {
-                suspense: true,
+            createQuery(() => ({
+                queryKey: key,
+                queryFn: () => {
+                    sleep(10);
+                    return 'data';
+                },
                 onSuccess: successFn2,
-            });
+            }));
             return <span>second</span>;
         }
         render(() => (<QueryClientProvider client={queryClient}>
@@ -196,18 +206,20 @@ describe("useQuery's in Suspense mode", () => {
         const key = queryKey();
         let succeed = false;
         function Page() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                if (!succeed) {
-                    throw new Error('Suspense Error Bingo');
-                }
-                else {
-                    return 'data';
-                }
-            }, {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    if (!succeed) {
+                        throw new Error('Suspense Error Bingo');
+                    }
+                    else {
+                        return 'data';
+                    }
+                },
                 retryDelay: 10,
                 suspense: true,
-            });
+            }));
             // Suspense only triggers if used in JSX
             return (<Show when={state.data}>
           <div>rendered</div>
@@ -238,18 +250,20 @@ describe("useQuery's in Suspense mode", () => {
         const key = queryKey();
         let succeed = false;
         function Page() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                if (!succeed) {
-                    throw new Error('Suspense Error Bingo');
-                }
-                else {
-                    return 'data';
-                }
-            }, {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    if (!succeed) {
+                        throw new Error('Suspense Error Bingo');
+                    }
+                    else {
+                        return 'data';
+                    }
+                },
                 retry: false,
                 suspense: true,
-            });
+            }));
             // Suspense only triggers if used in JSX
             return (<Show when={state.data}>
           <div>rendered</div>
@@ -283,15 +297,17 @@ describe("useQuery's in Suspense mode", () => {
         const key = queryKey();
         let count = 0;
         function Component() {
-            const result = createQuery(key, async () => {
-                await sleep(100);
-                count++;
-                return count;
-            }, {
+            const result = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(100);
+                    count++;
+                    return count;
+                },
                 retry: false,
                 suspense: true,
                 staleTime: 0,
-            });
+            }));
             return (<div>
           <span>data: {result.data}</span>
           <span>fetching: {result.isFetching ? 'true' : 'false'}</span>
@@ -326,20 +342,22 @@ describe("useQuery's in Suspense mode", () => {
         const key1 = queryKey();
         const key2 = queryKey();
         function Component(props) {
-            const result = createQuery(() => props.queryKey, async () => {
-                await sleep(100);
-                return props.queryKey;
-            }, {
+            const result = createQuery(() => ({
+                queryKey: props.queryKey,
+                queryFn: async () => {
+                    await sleep(100);
+                    return props.queryKey;
+                },
                 retry: false,
                 suspense: true,
-            });
+            }));
             return <div>data: {result.data}</div>;
         }
         function Page() {
-            const [key, setKey] = createSignal(key1());
+            const [key, setKey] = createSignal(key1);
             return (<div>
           <button onClick={() => {
-                    setKey(key2());
+                    setKey(key2);
                 }}>
             switch
           </button>
@@ -352,24 +370,23 @@ describe("useQuery's in Suspense mode", () => {
         <Page />
       </QueryClientProvider>));
         await waitFor(() => screen.getByText('Loading...'));
-        await waitFor(() => screen.getByText(`data: ${key1()}`));
+        await waitFor(() => screen.getByText(`data: ${key1}`));
         fireEvent.click(screen.getByText('switch'));
         await waitFor(() => screen.getByText('Loading...'));
-        await waitFor(() => screen.getByText(`data: ${key2()}`));
-        expect(
-        // @ts-expect-error
-        queryClient.getQueryCache().find(key2()).observers[0].listeners.length).toBe(1);
+        await waitFor(() => screen.getByText(`data: ${key2}`));
     });
     it('should throw errors to the error boundary by default', async () => {
         const key = queryKey();
         function Page() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                throw new Error('Suspense Error a1x');
-            }, {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    throw new Error('Suspense Error a1x');
+                },
                 retry: false,
                 suspense: true,
-            });
+            }));
             // read state.data to trigger suspense.
             createRenderEffect(() => {
                 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- trigger suspense
@@ -392,17 +409,18 @@ describe("useQuery's in Suspense mode", () => {
         await waitFor(() => screen.getByText('Loading...'));
         await waitFor(() => screen.getByText('error boundary'));
     });
-    it('should not throw errors to the error boundary when useErrorBoundary: false', async () => {
+    it('should not throw errors to the error boundary when throwErrors: false', async () => {
         const key = queryKey();
         function Page() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                throw new Error('Suspense Error a2x');
-            }, {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    throw new Error('Suspense Error a2x');
+                },
                 retry: false,
-                suspense: true,
-                useErrorBoundary: false,
-            });
+                throwErrors: false,
+            }));
             // read state.data to trigger suspense.
             createRenderEffect(() => {
                 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- trigger suspense
@@ -425,17 +443,18 @@ describe("useQuery's in Suspense mode", () => {
         await waitFor(() => screen.getByText('Loading...'));
         await waitFor(() => screen.getByText('rendered'));
     });
-    it('should not throw errors to the error boundary when a useErrorBoundary function returns true', async () => {
+    it('should throw errors to the error boundary when a throwErrors function returns true', async () => {
         const key = queryKey();
         function Page() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                return Promise.reject('Remote Error');
-            }, {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    return Promise.reject(new Error('Remote Error'));
+                },
                 retry: false,
-                suspense: true,
-                useErrorBoundary: (err) => err !== 'Local Error',
-            });
+                throwErrors: (err) => err.message !== 'Local Error',
+            }));
             // read state.data to trigger suspense.
             createRenderEffect(() => {
                 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- trigger suspense
@@ -458,17 +477,19 @@ describe("useQuery's in Suspense mode", () => {
         await waitFor(() => screen.getByText('Loading...'));
         await waitFor(() => screen.getByText('error boundary'));
     });
-    it('should not throw errors to the error boundary when a useErrorBoundary function returns false', async () => {
+    it('should not throw errors to the error boundary when a throwErrors function returns false', async () => {
         const key = queryKey();
         function Page() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                return Promise.reject('Local Error');
-            }, {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    return Promise.reject(new Error('Local Error'));
+                },
                 retry: false,
                 suspense: true,
-                useErrorBoundary: (err) => err !== 'Local Error',
-            });
+                throwErrors: (err) => err.message !== 'Local Error',
+            }));
             // read state.data to trigger suspense.
             createRenderEffect(() => {
                 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- trigger suspense
@@ -500,12 +521,12 @@ describe("useQuery's in Suspense mode", () => {
         });
         function Page() {
             const [enabled, setEnabled] = createSignal(false);
-            const result = createQuery(() => [key()], queryFn, {
+            const result = createQuery(() => ({
+                queryKey: [key],
+                queryFn,
                 suspense: true,
-                get enabled() {
-                    return enabled();
-                },
-            });
+                enabled: enabled(),
+            }));
             return (<div>
           <button onClick={() => setEnabled(true)}>fire</button>
           <h1>{result.data}</h1>
@@ -529,19 +550,21 @@ describe("useQuery's in Suspense mode", () => {
         let succeed = true;
         function Page() {
             const [nonce] = createSignal(0);
-            const queryKeys = () => [`${key()}-${succeed}`];
-            const result = createQuery(queryKeys, async () => {
-                await sleep(10);
-                if (!succeed) {
-                    throw new Error('Suspense Error Bingo');
-                }
-                else {
-                    return nonce();
-                }
-            }, {
+            const queryKeys = [`${key}-${succeed}`];
+            const result = createQuery(() => ({
+                queryKey: queryKeys,
+                queryFn: async () => {
+                    await sleep(10);
+                    if (!succeed) {
+                        throw new Error('Suspense Error Bingo');
+                    }
+                    else {
+                        return nonce();
+                    }
+                },
                 retry: false,
                 suspense: true,
-            });
+            }));
             return (<div>
           <span>rendered</span> <span>{result.data}</span>
           <button aria-label="fail" onClick={async () => {
@@ -576,18 +599,20 @@ describe("useQuery's in Suspense mode", () => {
         let succeed = true;
         function Page() {
             const [key, setKey] = createSignal(0);
-            const result = createQuery(() => [`${key()}-${succeed}`], async () => {
-                await sleep(10);
-                if (!succeed) {
-                    throw new Error('Suspense Error Bingo');
-                }
-                else {
-                    return 'data';
-                }
-            }, {
+            const result = createQuery(() => ({
+                queryKey: [`${key()}-${succeed}`],
+                queryFn: async () => {
+                    await sleep(10);
+                    if (!succeed) {
+                        throw new Error('Suspense Error Bingo');
+                    }
+                    else {
+                        return 'data';
+                    }
+                },
                 retry: false,
                 suspense: true,
-            });
+            }));
             return (<div>
           <span>rendered</span> <span>{result.data}</span>
           <button aria-label="fail" onClick={() => setKey((k) => k + 1)}>
@@ -620,16 +645,16 @@ describe("useQuery's in Suspense mode", () => {
         function Page() {
             const queryKeys = '1';
             const [enabled, setEnabled] = createSignal(false);
-            const result = createQuery(() => [queryKeys], async () => {
-                await sleep(10);
-                throw new Error('Suspense Error Bingo');
-            }, {
+            const result = createQuery(() => ({
+                queryKey: [queryKeys],
+                queryFn: async () => {
+                    await sleep(10);
+                    throw new Error('Suspense Error Bingo');
+                },
                 retry: false,
                 suspense: true,
-                get enabled() {
-                    return enabled();
-                },
-            });
+                enabled: enabled(),
+            }));
             return (<div>
           <span>rendered</span> <span>{result.data}</span>
           <button aria-label="fail" onClick={() => {
@@ -658,17 +683,21 @@ describe("useQuery's in Suspense mode", () => {
         // render error boundary fallback (error boundary)
         await waitFor(() => screen.getByText('error boundary'));
     });
-    it('should render the correct amount of times in Suspense mode when cacheTime is set to 0', async () => {
+    it('should render the correct amount of times in Suspense mode when gcTime is set to 0', async () => {
         const key = queryKey();
         let state = null;
         let count = 0;
         let renders = 0;
         function Page() {
-            state = createQuery(key, async () => {
-                count++;
-                await sleep(10);
-                return count;
-            }, { suspense: true, cacheTime: 0 });
+            state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    count++;
+                    await sleep(10);
+                    return count;
+                },
+                gcTime: 0,
+            }));
             createRenderEffect(on([() => ({ ...state })], () => {
                 renders++;
             }));

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

@@ -8,10 +8,13 @@ describe("useQuery's in Suspense mode with transitions", () => {
     it('should render the content when the transition is done', async () => {
         const key = queryKey();
         function Suspended() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                return true;
-            });
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    return true;
+                },
+            }));
             return <Show when={state.data}>Message</Show>;
         }
         function Page() {