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

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

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen, waitFor } from 'solid-testing-library';
 import * as QueriesObserverModule from '../../../query-core/src/queriesObserver';
-import { createContext, createMemo, createRenderEffect, createSignal, ErrorBoundary, } from 'solid-js';
+import { createRenderEffect, createSignal } from 'solid-js';
 import { createQueries, QueriesObserver, QueryCache, QueryClientProvider, } from '..';
 import { createQueryClient, expectType, expectTypeNotAny, queryKey, sleep, } from './utils';
 describe('useQueries', () => {
@@ -11,7 +11,7 @@ describe('useQueries', () => {
         const key2 = queryKey();
         const results = [];
         function Page() {
-            const result = createQueries({
+            const result = createQueries(() => ({
                 queries: [
                     {
                         queryKey: key1,
@@ -28,7 +28,7 @@ describe('useQueries', () => {
                         },
                     },
                 ],
-            });
+            }));
             createRenderEffect(() => {
                 results.push([...result]);
             });
@@ -48,223 +48,6 @@ describe('useQueries', () => {
         expect(results[1]).toMatchObject([{ data: 1 }, { data: undefined }]);
         expect(results[2]).toMatchObject([{ data: 1 }, { data: 2 }]);
     });
-    it('should keep previous data if amount of queries is the same', async () => {
-        const key1 = queryKey();
-        const key2 = queryKey();
-        const states = [];
-        function Page() {
-            const [count, setCount] = createSignal(1);
-            const result = createQueries({
-                queries: [
-                    {
-                        queryKey: () => [key1(), count()],
-                        keepPreviousData: true,
-                        queryFn: async () => {
-                            await sleep(10);
-                            return count() * 2;
-                        },
-                    },
-                    {
-                        queryKey: () => [key2(), count()],
-                        keepPreviousData: true,
-                        queryFn: async () => {
-                            await sleep(35);
-                            return count() * 5;
-                        },
-                    },
-                ],
-            });
-            createRenderEffect(() => {
-                states.push([...result]);
-            });
-            const isFetching = createMemo(() => result.some((r) => r.isFetching));
-            return (<div>
-          <div>
-            data1: {String(result[0].data ?? 'null')}, data2:{' '}
-            {String(result[1].data ?? 'null')}
-          </div>
-          <div>isFetching: {String(isFetching())}</div>
-          <button onClick={() => setCount((prev) => prev + 1)}>inc</button>
-        </div>);
-        }
-        render(() => (<QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>));
-        await waitFor(() => screen.getByText('data1: 2, data2: 5'));
-        fireEvent.click(screen.getByRole('button', { name: /inc/i }));
-        await waitFor(() => screen.getByText('data1: 4, data2: 10'));
-        await waitFor(() => screen.getByText('isFetching: false'));
-        expect(states[states.length - 1]).toMatchObject([
-            { status: 'success', data: 4, isPreviousData: false, isFetching: false },
-            { status: 'success', data: 10, isPreviousData: false, isFetching: false },
-        ]);
-    });
-    it('should keep previous data for variable amounts of useQueries', async () => {
-        const key = queryKey();
-        const states = [];
-        function Page() {
-            const [count, setCount] = createSignal(2);
-            const result = createQueries({
-                // TODO(lukemurray): reactive queries doesn't appear to work
-                get queries() {
-                    return Array.from({ length: count() }, (_, i) => ({
-                        queryKey: () => [key(), count(), i + 1],
-                        keepPreviousData: true,
-                        queryFn: async () => {
-                            await sleep(35 * (i + 1));
-                            return (i + 1) * count() * 2;
-                        },
-                    }));
-                },
-            });
-            createRenderEffect(() => {
-                states.push([...result]);
-            });
-            const isFetching = createMemo(() => result.some((r) => r.isFetching));
-            return (<div>
-          <div>data: {result.map((it) => it.data).join(',')}</div>
-          <div>isFetching: {String(isFetching())}</div>
-          <button onClick={() => setCount((prev) => prev + 1)}>inc</button>
-        </div>);
-        }
-        render(() => (<QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>));
-        await waitFor(() => screen.getByText('data: 4,8'));
-        fireEvent.click(screen.getByRole('button', { name: /inc/i }));
-        await waitFor(() => screen.getByText('data: 6,12,18'));
-        await waitFor(() => screen.getByText('isFetching: false'));
-        expect(states[states.length - 1]).toMatchObject([
-            { status: 'success', data: 6, isPreviousData: false, isFetching: false },
-            { status: 'success', data: 12, isPreviousData: false, isFetching: false },
-            { status: 'success', data: 18, isPreviousData: false, isFetching: false },
-        ]);
-    });
-    it('should keep previous data when switching between queries', async () => {
-        const key = queryKey();
-        const states = [];
-        function Page() {
-            const [series1, setSeries1] = createSignal(1);
-            const [series2, setSeries2] = createSignal(2);
-            const ids = [series1, series2];
-            const result = createQueries({
-                queries: ids.map((id) => {
-                    return {
-                        queryKey: () => [key(), id()],
-                        queryFn: async () => {
-                            await sleep(5);
-                            return id() * 5;
-                        },
-                        keepPreviousData: true,
-                    };
-                }),
-            });
-            createRenderEffect(() => {
-                states.push([...result]);
-            });
-            const isFetching = createMemo(() => result.some((r) => r.isFetching));
-            return (<div>
-          <div>
-            data1: {String(result[0]?.data ?? 'null')}, data2:{' '}
-            {String(result[1]?.data ?? 'null')}
-          </div>
-          <div>isFetching: {String(isFetching())}</div>
-          <button onClick={() => setSeries2(3)}>setSeries2</button>
-          <button onClick={() => setSeries1(2)}>setSeries1</button>
-        </div>);
-        }
-        render(() => (<QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>));
-        await waitFor(() => screen.getByText('data1: 5, data2: 10'));
-        fireEvent.click(screen.getByRole('button', { name: /setSeries2/i }));
-        await waitFor(() => screen.getByText('data1: 5, data2: 15'));
-        fireEvent.click(screen.getByRole('button', { name: /setSeries1/i }));
-        await waitFor(() => screen.getByText('data1: 10, data2: 15'));
-        await waitFor(() => screen.getByText('isFetching: false'));
-        expect(states[states.length - 1]).toMatchObject([
-            { status: 'success', data: 10, isPreviousData: false, isFetching: false },
-            { status: 'success', data: 15, isPreviousData: false, isFetching: false },
-        ]);
-    });
-    it('should not go to infinite render loop with previous data when toggling queries', async () => {
-        const key = queryKey();
-        const states = [];
-        function Page() {
-            const [enableId1, setEnableId1] = createSignal(true);
-            const ids = createMemo(() => (enableId1() ? [1, 2] : [2]));
-            const result = createQueries({
-                // TODO(lukemurray): same issue queries should be reactive
-                get queries() {
-                    return ids().map((id) => {
-                        return {
-                            queryKey: () => [key(), id],
-                            queryFn: async () => {
-                                await sleep(5);
-                                return id * 5;
-                            },
-                            keepPreviousData: true,
-                        };
-                    });
-                },
-            });
-            createRenderEffect(() => {
-                states.push([...result]);
-            });
-            const text = createMemo(() => {
-                return result
-                    .map((r, idx) => `data${idx + 1}: ${r.data ?? 'null'}`)
-                    .join(' ');
-            });
-            const isFetching = createMemo(() => result.some((r) => r.isFetching));
-            return (<div>
-          <div>{text()}</div>
-          <div>isFetching: {String(isFetching())}</div>
-          <button onClick={() => setEnableId1(false)}>set1Disabled</button>
-          <button onClick={() => setEnableId1(true)}>set2Enabled</button>
-        </div>);
-        }
-        render(() => (<QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>));
-        await waitFor(() => screen.getByText('data1: 5 data2: 10'));
-        fireEvent.click(screen.getByRole('button', { name: /set1Disabled/i }));
-        await waitFor(() => screen.getByText('data1: 10'));
-        await waitFor(() => screen.getByText('isFetching: false'));
-        fireEvent.click(screen.getByRole('button', { name: /set2Enabled/i }));
-        await waitFor(() => screen.getByText('data1: 5 data2: 10'));
-        await waitFor(() => screen.getByText('isFetching: false'));
-        await waitFor(() => expect(states.length).toBe(5));
-        expect(states[0]).toMatchObject([
-            {
-                status: 'loading',
-                data: undefined,
-                isPreviousData: false,
-                isFetching: true,
-            },
-            {
-                status: 'loading',
-                data: undefined,
-                isPreviousData: false,
-                isFetching: true,
-            },
-        ]);
-        expect(states[1]).toMatchObject([
-            { status: 'success', data: 5, isPreviousData: false, isFetching: false },
-            { status: 'success', data: 10, isPreviousData: false, isFetching: false },
-        ]);
-        expect(states[2]).toMatchObject([
-            { status: 'success', data: 10, isPreviousData: false, isFetching: false },
-        ]);
-        expect(states[3]).toMatchObject([
-            { status: 'success', data: 5, isPreviousData: false, isFetching: true },
-            { status: 'success', data: 10, isPreviousData: false, isFetching: false },
-        ]);
-        expect(states[4]).toMatchObject([
-            { status: 'success', data: 5, isPreviousData: false, isFetching: false },
-            { status: 'success', data: 10, isPreviousData: false, isFetching: false },
-        ]);
-    });
     it('handles type parameter - tuple of tuples', async () => {
         const key1 = queryKey();
         const key2 = queryKey();
@@ -272,7 +55,7 @@ describe('useQueries', () => {
         // @ts-expect-error (Page component is not rendered)
         // eslint-disable-next-line
         function Page() {
-            const result1 = createQueries({
+            const result1 = createQueries(() => ({
                 queries: [
                     {
                         queryKey: key1,
@@ -287,7 +70,7 @@ describe('useQueries', () => {
                         queryFn: () => ['string[]'],
                     },
                 ],
-            });
+            }));
             expectType(result1[0]);
             expectType(result1[1]);
             expectType(result1[2]);
@@ -296,7 +79,7 @@ describe('useQueries', () => {
             expectType(result1[2].data);
             expectType(result1[2].error);
             // TData (3rd element) takes precedence over TQueryFnData (1st element)
-            const result2 = createQueries({
+            const result2 = createQueries(() => ({
                 queries: [
                     {
                         queryKey: key1,
@@ -317,13 +100,13 @@ describe('useQueries', () => {
                         },
                     },
                 ],
-            });
+            }));
             expectType(result2[0]);
             expectType(result2[1]);
             expectType(result2[0].data);
             expectType(result2[1].data);
             // types should be enforced
-            createQueries({
+            createQueries(() => ({
                 queries: [
                     {
                         queryKey: key1,
@@ -362,18 +145,16 @@ describe('useQueries', () => {
                         initialData: 123,
                     },
                 ],
-            });
+            }));
             // field names should be enforced
-            createQueries({
+            createQueries(() => ({
                 queries: [
                     {
                         queryKey: key1,
                         queryFn: () => 'string',
-                        // @ts-expect-error (invalidField)
-                        someInvalidField: [],
                     },
                 ],
-            });
+            }));
         }
     });
     it('handles type parameter - tuple of objects', async () => {
@@ -383,7 +164,7 @@ describe('useQueries', () => {
         // @ts-expect-error (Page component is not rendered)
         // eslint-disable-next-line
         function Page() {
-            const result1 = createQueries({
+            const result1 = createQueries(() => ({
                 queries: [
                     {
                         queryKey: key1,
@@ -398,7 +179,7 @@ describe('useQueries', () => {
                         queryFn: () => ['string[]'],
                     },
                 ],
-            });
+            }));
             expectType(result1[0]);
             expectType(result1[1]);
             expectType(result1[2]);
@@ -407,7 +188,7 @@ describe('useQueries', () => {
             expectType(result1[2].data);
             expectType(result1[2].error);
             // TData (data prop) takes precedence over TQueryFnData (queryFnData prop)
-            const result2 = createQueries({
+            const result2 = createQueries(() => ({
                 queries: [
                     {
                         queryKey: key1,
@@ -428,13 +209,13 @@ describe('useQueries', () => {
                         },
                     },
                 ],
-            });
+            }));
             expectType(result2[0]);
             expectType(result2[1]);
             expectType(result2[0].data);
             expectType(result2[1].data);
             // can pass only TData (data prop) although TQueryFnData will be left unknown
-            const result3 = createQueries({
+            const result3 = createQueries(() => ({
                 queries: [
                     {
                         queryKey: key1,
@@ -455,13 +236,13 @@ describe('useQueries', () => {
                         },
                     },
                 ],
-            });
+            }));
             expectType(result3[0]);
             expectType(result3[1]);
             expectType(result3[0].data);
             expectType(result3[1].data);
             // types should be enforced
-            createQueries({
+            createQueries(() => ({
                 queries: [
                     {
                         queryKey: key1,
@@ -500,18 +281,16 @@ describe('useQueries', () => {
                         initialData: 123,
                     },
                 ],
-            });
+            }));
             // field names should be enforced
-            createQueries({
+            createQueries(() => ({
                 queries: [
                     {
                         queryKey: key1,
                         queryFn: () => 'string',
-                        // @ts-expect-error (invalidField)
-                        someInvalidField: [],
                     },
                 ],
-            });
+            }));
         }
     });
     it('handles array literal without type parameter to infer result type', async () => {
@@ -523,24 +302,24 @@ describe('useQueries', () => {
         // eslint-disable-next-line
         function Page() {
             // Array.map preserves TQueryFnData
-            const result1 = createQueries({
+            const result1 = createQueries(() => ({
                 queries: Array(50).map((_, i) => ({
-                    queryKey: () => ['key', i],
+                    queryKey: ['key', i],
                     queryFn: () => i + 10,
                 })),
-            });
+            }));
             expectType(result1);
             expectType(result1[0]?.data);
             // Array.map preserves TData
-            const result2 = createQueries({
+            const result2 = createQueries(() => ({
                 queries: Array(50).map((_, i) => ({
-                    queryKey: () => ['key', i],
+                    queryKey: ['key', i],
                     queryFn: () => i + 10,
                     select: (data) => data.toString(),
                 })),
-            });
+            }));
             expectType(result2);
-            const result3 = createQueries({
+            const result3 = createQueries(() => ({
                 queries: [
                     {
                         queryKey: key1,
@@ -556,7 +335,7 @@ describe('useQueries', () => {
                         select: () => 123,
                     },
                 ],
-            });
+            }));
             expectType(result3[0]);
             expectType(result3[1]);
             expectType(result3[2]);
@@ -565,7 +344,7 @@ describe('useQueries', () => {
             // select takes precedence over queryFn
             expectType(result3[2].data);
             // initialData/placeholderData are enforced
-            createQueries({
+            createQueries(() => ({
                 queries: [
                     {
                         queryKey: key1,
@@ -582,9 +361,9 @@ describe('useQueries', () => {
                         initialData: 123,
                     },
                 ],
-            });
+            }));
             // select / onSuccess / onSettled params are "indirectly" enforced
-            createQueries({
+            createQueries(() => ({
                 queries: [
                     // unfortunately TS will not suggest the type for you
                     {
@@ -627,9 +406,9 @@ describe('useQueries', () => {
                         },
                     },
                 ],
-            });
+            }));
             // callbacks are also indirectly enforced with Array.map
-            createQueries({
+            createQueries(() => ({
                 // @ts-expect-error (onSuccess only accepts string)
                 queries: Array(50).map((_, i) => ({
                     queryKey: ['key', i],
@@ -637,17 +416,17 @@ describe('useQueries', () => {
                     select: (data) => data.toString(),
                     onSuccess: (_data) => null,
                 })),
-            });
-            createQueries({
+            }));
+            createQueries(() => ({
                 queries: Array(50).map((_, i) => ({
-                    queryKey: () => ['key', i],
+                    queryKey: ['key', i],
                     queryFn: () => i + 10,
                     select: (data) => data.toString(),
                     onSuccess: (_data) => null,
                 })),
-            });
+            }));
             // results inference works when all the handlers are defined
-            const result4 = createQueries({
+            const result4 = createQueries(() => ({
                 queries: [
                     {
                         queryKey: key1,
@@ -680,12 +459,12 @@ describe('useQueries', () => {
                         },
                     },
                 ],
-            });
+            }));
             expectType(result4[0]);
             expectType(result4[1]);
             expectType(result4[2]);
             // handles when queryFn returns a Promise
-            const result5 = createQueries({
+            const result5 = createQueries(() => ({
                 queries: [
                     {
                         queryKey: key1,
@@ -698,68 +477,64 @@ describe('useQueries', () => {
                         onSettled: (a) => null,
                     },
                 ],
-            });
+            }));
             expectType(result5[0]);
             // Array as const does not throw error
-            const result6 = createQueries({
+            const result6 = createQueries(() => ({
                 queries: [
                     {
-                        queryKey: () => ['key1'],
+                        queryKey: ['key1'],
                         queryFn: () => 'string',
                     },
                     {
-                        queryKey: () => ['key1'],
+                        queryKey: ['key1'],
                         queryFn: () => 123,
                     },
                 ],
-            });
+            }));
             expectType(result6[0]);
             expectType(result6[1]);
             // field names should be enforced - array literal
-            createQueries({
+            createQueries(() => ({
                 queries: [
                     {
                         queryKey: key1,
                         queryFn: () => 'string',
-                        // @ts-expect-error (invalidField)
-                        someInvalidField: [],
                     },
                 ],
-            });
+            }));
             // field names should be enforced - Array.map() result
-            createQueries({
+            createQueries(() => ({
                 // @ts-expect-error (invalidField)
                 queries: Array(10).map(() => ({
                     someInvalidField: '',
                 })),
-            });
+            }));
             // field names should be enforced - array literal
-            createQueries({
+            createQueries(() => ({
                 queries: [
                     {
                         queryKey: key1,
                         queryFn: () => 'string',
-                        // @ts-expect-error (invalidField)
-                        someInvalidField: [],
                     },
                 ],
-            });
+            }));
             // supports queryFn using fetch() to return Promise<any> - Array.map() result
-            createQueries({
+            createQueries(() => ({
                 queries: Array(50).map((_, i) => ({
-                    queryKey: () => ['key', i],
+                    queryKey: ['key', i],
                     queryFn: () => fetch('return Promise<any>').then((resp) => resp.json()),
                 })),
-            });
+            }));
             // supports queryFn using fetch() to return Promise<any> - array literal
-            createQueries({
+            createQueries(() => ({
                 queries: [
                     {
                         queryKey: key1,
                         queryFn: () => fetch('return Promise<any>').then((resp) => resp.json()),
                     },
                 ],
-            });
+            }));
         }
     });
     it('handles strongly typed queryFn factories and useQueries wrappers', () => {
@@ -775,7 +550,7 @@ describe('useQueries', () => {
         const getSelectorB = () => (data) => [data, +data];
         // Wrapper with strongly typed array-parameter
         function useWrappedQueries(queries) {
-            return createQueries({
+            return createQueries(() => ({
                 queries: queries.map(
                 // no need to type the mapped query
                 (query) => {
@@ -792,43 +567,43 @@ describe('useQueries', () => {
                             : undefined,
                     };
                 }),
-            });
+            }));
         }
         // @ts-expect-error (Page component is not rendered)
         // eslint-disable-next-line
         function Page() {
-            const result = createQueries({
+            const result = createQueries(() => ({
                 queries: [
                     {
-                        queryKey: () => getQueryKeyA(),
+                        queryKey: getQueryKeyA(),
                         queryFn: getQueryFunctionA(),
                     },
                     {
-                        queryKey: () => getQueryKeyB('id'),
+                        queryKey: getQueryKeyB('id'),
                         queryFn: getQueryFunctionB(),
                     },
                 ],
-            });
+            }));
             expectType(result[0]);
             expectType(result[1]);
-            const withSelector = createQueries({
+            const withSelector = createQueries(() => ({
                 queries: [
                     {
-                        queryKey: () => getQueryKeyA(),
+                        queryKey: getQueryKeyA(),
                         queryFn: getQueryFunctionA(),
                         select: getSelectorA(),
                     },
                     {
-                        queryKey: () => getQueryKeyB('id'),
+                        queryKey: getQueryKeyB('id'),
                         queryFn: getQueryFunctionB(),
                         select: getSelectorB(),
                     },
                 ],
-            });
+            }));
             expectType(withSelector[0]);
             expectType(withSelector[1]);
             const withWrappedQueries = useWrappedQueries(Array(10).map(() => ({
-                queryKey: () => getQueryKeyA(),
+                queryKey: getQueryKeyA(),
                 queryFn: getQueryFunctionA(),
                 select: getSelectorA(),
             })));
@@ -851,7 +626,7 @@ describe('useQueries', () => {
             return new QueriesObserverMock(fn);
         });
         function Queries() {
-            createQueries({
+            createQueries(() => ({
                 queries: [
                     {
                         queryKey: key1,
@@ -861,7 +636,7 @@ describe('useQueries', () => {
                         },
                     },
                 ],
-            });
+            }));
             return (<div>
           <span>queries</span>
         </div>);
@@ -882,77 +657,21 @@ describe('useQueries', () => {
         await sleep(20);
         QueriesObserverSpy.mockRestore();
     });
-    describe('with custom context', () => {
-        it('should return the correct states', async () => {
-            const context = createContext(undefined);
-            const key1 = queryKey();
-            const key2 = queryKey();
-            const results = [];
-            function Page() {
-                const result = createQueries({
-                    context,
-                    queries: [
-                        {
-                            queryKey: key1,
-                            queryFn: async () => {
-                                await sleep(5);
-                                return 1;
-                            },
-                        },
-                        {
-                            queryKey: key2,
-                            queryFn: async () => {
-                                await sleep(10);
-                                return 2;
-                            },
-                        },
-                    ],
-                });
-                createRenderEffect(() => {
-                    results.push([...result]);
-                });
-                return null;
-            }
-            render(() => (<QueryClientProvider client={queryClient} context={context}>
-          <Page />
-        </QueryClientProvider>));
-            await sleep(30);
-            expect(results[0]).toMatchObject([
-                { data: undefined },
-                { data: undefined },
-            ]);
-            expect(results[results.length - 1]).toMatchObject([
-                { data: 1 },
-                { data: 2 },
-            ]);
-        });
-        it('should throw if the context is necessary and is not passed to useQueries', async () => {
-            const context = createContext(undefined);
-            const key1 = queryKey();
-            const key2 = queryKey();
-            const results = [];
-            function Page() {
-                const result = createQueries({
-                    queries: [
-                        {
-                            queryKey: key1,
-                            queryFn: async () => 1,
-                        },
-                        {
-                            queryKey: key2,
-                            queryFn: async () => 2,
-                        },
-                    ],
-                });
-                results.push(result);
-                return null;
-            }
-            render(() => (<QueryClientProvider client={queryClient} context={context}>
-          <ErrorBoundary fallback={() => <div>error boundary</div>}>
-            <Page />
-          </ErrorBoundary>
-        </QueryClientProvider>));
-            await waitFor(() => screen.getByText('error boundary'));
-        });
+    it('should use provided custom queryClient', async () => {
+        const key = queryKey();
+        const queryFn = () => {
+            return Promise.resolve('custom client');
+        };
+        function Page() {
+            const state = createQueries(() => ({
+                queries: [{ queryKey: key, queryFn }],
+                queryClient,
+            }));
+            return (<div>
+          <h1>Status: {state[0].data}</h1>
+        </div>);
+        }
+        render(() => <Page />);
+        await waitFor(() => screen.getByText('Status: custom client'));
     });
 });