@tanstack/solid-query 5.0.0-alpha.34 → 5.0.0-alpha.38

package/build/source/__tests__/createQueries.test.jsx

@@ -0,0 +1,590 @@
+import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library';
+import * as QueriesObserverModule from '../../../query-core/src/queriesObserver';
+import { createRenderEffect, createSignal } from 'solid-js';
+import { createQueries, QueriesObserver, QueryCache, QueryClientProvider, } from '..';
+import { createQueryClient, expectType, expectTypeNotAny, queryKey, sleep, } from './utils';
+import { vi } from 'vitest';
+describe('useQueries', () => {
+    const queryCache = new QueryCache();
+    const queryClient = createQueryClient({ queryCache });
+    it('should return the correct states', async () => {
+        const key1 = queryKey();
+        const key2 = queryKey();
+        const results = [];
+        function Page() {
+            const result = createQueries(() => ({
+                queries: [
+                    {
+                        queryKey: key1,
+                        queryFn: async () => {
+                            await sleep(10);
+                            return 1;
+                        },
+                    },
+                    {
+                        queryKey: key2,
+                        queryFn: async () => {
+                            await sleep(100);
+                            return 2;
+                        },
+                    },
+                ],
+            }));
+            createRenderEffect(() => {
+                results.push([...result]);
+            });
+            return (<div>
+          <div>
+            data1: {String(result[0].data ?? 'null')}, data2:{' '}
+            {String(result[1].data ?? 'null')}
+          </div>
+        </div>);
+        }
+        render(() => (<QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>));
+        await waitFor(() => screen.getByText('data1: 1, data2: 2'));
+        expect(results.length).toBe(3);
+        expect(results[0]).toMatchObject([{ data: undefined }, { data: undefined }]);
+        expect(results[1]).toMatchObject([{ data: 1 }, { data: undefined }]);
+        expect(results[2]).toMatchObject([{ data: 1 }, { data: 2 }]);
+    });
+    it('handles type parameter - tuple of tuples', async () => {
+        const key1 = queryKey();
+        const key2 = queryKey();
+        const key3 = queryKey();
+        // @ts-expect-error (Page component is not rendered)
+        // eslint-disable-next-line
+        function Page() {
+            const result1 = createQueries(() => ({
+                queries: [
+                    {
+                        queryKey: key1,
+                        queryFn: () => 1,
+                    },
+                    {
+                        queryKey: key2,
+                        queryFn: () => 'string',
+                    },
+                    {
+                        queryKey: key3,
+                        queryFn: () => ['string[]'],
+                    },
+                ],
+            }));
+            expectType(result1[0]);
+            expectType(result1[1]);
+            expectType(result1[2]);
+            expectType(result1[0].data);
+            expectType(result1[1].data);
+            expectType(result1[2].data);
+            expectType(result1[2].error);
+            // TData (3rd element) takes precedence over TQueryFnData (1st element)
+            const result2 = createQueries(() => ({
+                queries: [
+                    {
+                        queryKey: key1,
+                        queryFn: () => 'string',
+                        select: (a) => {
+                            expectType(a);
+                            expectTypeNotAny(a);
+                            return a.toLowerCase();
+                        },
+                    },
+                    {
+                        queryKey: key2,
+                        queryFn: () => 'string',
+                        select: (a) => {
+                            expectType(a);
+                            expectTypeNotAny(a);
+                            return parseInt(a);
+                        },
+                    },
+                ],
+            }));
+            expectType(result2[0]);
+            expectType(result2[1]);
+            expectType(result2[0].data);
+            expectType(result2[1].data);
+            // types should be enforced
+            createQueries(() => ({
+                queries: [
+                    {
+                        queryKey: key1,
+                        queryFn: () => 'string',
+                        select: (a) => {
+                            expectType(a);
+                            expectTypeNotAny(a);
+                            return a.toLowerCase();
+                        },
+                        placeholderData: 'string',
+                        // @ts-expect-error (initialData: string)
+                        initialData: 123,
+                    },
+                    {
+                        queryKey: key2,
+                        queryFn: () => 'string',
+                        select: (a) => {
+                            expectType(a);
+                            expectTypeNotAny(a);
+                            return parseInt(a);
+                        },
+                        placeholderData: 'string',
+                        // @ts-expect-error (initialData: string)
+                        initialData: 123,
+                    },
+                ],
+            }));
+            // field names should be enforced
+            createQueries(() => ({
+                queries: [
+                    {
+                        queryKey: key1,
+                        queryFn: () => 'string',
+                    },
+                ],
+            }));
+        }
+    });
+    it('handles type parameter - tuple of objects', async () => {
+        const key1 = queryKey();
+        const key2 = queryKey();
+        const key3 = queryKey();
+        // @ts-expect-error (Page component is not rendered)
+        // eslint-disable-next-line
+        function Page() {
+            const result1 = createQueries(() => ({
+                queries: [
+                    {
+                        queryKey: key1,
+                        queryFn: () => 1,
+                    },
+                    {
+                        queryKey: key2,
+                        queryFn: () => 'string',
+                    },
+                    {
+                        queryKey: key3,
+                        queryFn: () => ['string[]'],
+                    },
+                ],
+            }));
+            expectType(result1[0]);
+            expectType(result1[1]);
+            expectType(result1[2]);
+            expectType(result1[0].data);
+            expectType(result1[1].data);
+            expectType(result1[2].data);
+            expectType(result1[2].error);
+            // TData (data prop) takes precedence over TQueryFnData (queryFnData prop)
+            const result2 = createQueries(() => ({
+                queries: [
+                    {
+                        queryKey: key1,
+                        queryFn: () => 'string',
+                        select: (a) => {
+                            expectType(a);
+                            expectTypeNotAny(a);
+                            return a.toLowerCase();
+                        },
+                    },
+                    {
+                        queryKey: key2,
+                        queryFn: () => 'string',
+                        select: (a) => {
+                            expectType(a);
+                            expectTypeNotAny(a);
+                            return parseInt(a);
+                        },
+                    },
+                ],
+            }));
+            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(() => ({
+                queries: [
+                    {
+                        queryKey: key1,
+                        queryFn: () => 'string',
+                        select: (a) => {
+                            expectType(a);
+                            expectTypeNotAny(a);
+                            return a;
+                        },
+                    },
+                    {
+                        queryKey: key2,
+                        queryFn: () => 'string',
+                        select: (a) => {
+                            expectType(a);
+                            expectTypeNotAny(a);
+                            return a;
+                        },
+                    },
+                ],
+            }));
+            expectType(result3[0]);
+            expectType(result3[1]);
+            expectType(result3[0].data);
+            expectType(result3[1].data);
+            // types should be enforced
+            createQueries(() => ({
+                queries: [
+                    {
+                        queryKey: key1,
+                        queryFn: () => 'string',
+                        select: (a) => {
+                            expectType(a);
+                            expectTypeNotAny(a);
+                            return a.toLowerCase();
+                        },
+                        placeholderData: 'string',
+                        // @ts-expect-error (initialData: string)
+                        initialData: 123,
+                    },
+                    {
+                        queryKey: key2,
+                        queryFn: () => 'string',
+                        select: (a) => {
+                            expectType(a);
+                            expectTypeNotAny(a);
+                            return parseInt(a);
+                        },
+                        placeholderData: 'string',
+                        // @ts-expect-error (initialData: string)
+                        initialData: 123,
+                    },
+                ],
+            }));
+            // field names should be enforced
+            createQueries(() => ({
+                queries: [
+                    {
+                        queryKey: key1,
+                        queryFn: () => 'string',
+                    },
+                ],
+            }));
+        }
+    });
+    it('handles array literal without type parameter to infer result type', async () => {
+        const key1 = queryKey();
+        const key2 = queryKey();
+        const key3 = queryKey();
+        const key4 = queryKey();
+        // @ts-expect-error (Page component is not rendered)
+        // eslint-disable-next-line
+        function Page() {
+            // Array.map preserves TQueryFnData
+            const result1 = createQueries(() => ({
+                queries: Array(50).map((_, i) => ({
+                    queryKey: ['key', i],
+                    queryFn: () => i + 10,
+                })),
+            }));
+            expectType(result1);
+            expectType(result1[0]?.data);
+            // Array.map preserves TData
+            const result2 = createQueries(() => ({
+                queries: Array(50).map((_, i) => ({
+                    queryKey: ['key', i],
+                    queryFn: () => i + 10,
+                    select: (data) => data.toString(),
+                })),
+            }));
+            expectType(result2);
+            const result3 = createQueries(() => ({
+                queries: [
+                    {
+                        queryKey: key1,
+                        queryFn: () => 1,
+                    },
+                    {
+                        queryKey: key2,
+                        queryFn: () => 'string',
+                    },
+                    {
+                        queryKey: key3,
+                        queryFn: () => ['string[]'],
+                        select: () => 123,
+                    },
+                ],
+            }));
+            expectType(result3[0]);
+            expectType(result3[1]);
+            expectType(result3[2]);
+            expectType(result3[0].data);
+            expectType(result3[1].data);
+            // select takes precedence over queryFn
+            expectType(result3[2].data);
+            // initialData/placeholderData are enforced
+            createQueries(() => ({
+                queries: [
+                    {
+                        queryKey: key1,
+                        queryFn: () => 'string',
+                        placeholderData: 'string',
+                        // @ts-expect-error (initialData: string)
+                        initialData: 123,
+                    },
+                    {
+                        queryKey: key2,
+                        queryFn: () => 123,
+                        // @ts-expect-error (placeholderData: number)
+                        placeholderData: 'string',
+                        initialData: 123,
+                    },
+                ],
+            }));
+            // select params are "indirectly" enforced
+            createQueries(() => ({
+                queries: [
+                    // unfortunately TS will not suggest the type for you
+                    {
+                        queryKey: key1,
+                        queryFn: () => 'string',
+                    },
+                    // however you can add a type to the callback
+                    {
+                        queryKey: key2,
+                        queryFn: () => 'string',
+                    },
+                    // the type you do pass is enforced
+                    {
+                        queryKey: key3,
+                        queryFn: () => 'string',
+                    },
+                    {
+                        queryKey: key4,
+                        queryFn: () => 'string',
+                        select: (a) => parseInt(a),
+                    },
+                ],
+            }));
+            // callbacks are also indirectly enforced with Array.map
+            createQueries(() => ({
+                queries: Array(50).map((_, i) => ({
+                    queryKey: ['key', i],
+                    queryFn: () => i + 10,
+                    select: (data) => data.toString(),
+                })),
+            }));
+            createQueries(() => ({
+                queries: Array(50).map((_, i) => ({
+                    queryKey: ['key', i],
+                    queryFn: () => i + 10,
+                    select: (data) => data.toString(),
+                })),
+            }));
+            // results inference works when all the handlers are defined
+            const result4 = createQueries(() => ({
+                queries: [
+                    {
+                        queryKey: key1,
+                        queryFn: () => 'string',
+                    },
+                    {
+                        queryKey: key2,
+                        queryFn: () => 'string',
+                    },
+                    {
+                        queryKey: key4,
+                        queryFn: () => 'string',
+                        select: (a) => parseInt(a),
+                    },
+                ],
+            }));
+            expectType(result4[0]);
+            expectType(result4[1]);
+            expectType(result4[2]);
+            // handles when queryFn returns a Promise
+            const result5 = createQueries(() => ({
+                queries: [
+                    {
+                        queryKey: key1,
+                        queryFn: () => Promise.resolve('string'),
+                    },
+                ],
+            }));
+            expectType(result5[0]);
+            // Array as const does not throw error
+            const result6 = createQueries(() => ({
+                queries: [
+                    {
+                        queryKey: ['key1'],
+                        queryFn: () => 'string',
+                    },
+                    {
+                        queryKey: ['key1'],
+                        queryFn: () => 123,
+                    },
+                ],
+            }));
+            expectType(result6[0]);
+            expectType(result6[1]);
+            // field names should be enforced - array literal
+            createQueries(() => ({
+                queries: [
+                    {
+                        queryKey: key1,
+                        queryFn: () => 'string',
+                    },
+                ],
+            }));
+            // field names should be enforced - Array.map() result
+            createQueries(() => ({
+                // @ts-expect-error (invalidField)
+                queries: Array(10).map(() => ({
+                    someInvalidField: '',
+                })),
+            }));
+            // field names should be enforced - array literal
+            createQueries(() => ({
+                queries: [
+                    {
+                        queryKey: key1,
+                        queryFn: () => 'string',
+                    },
+                ],
+            }));
+            // supports queryFn using fetch() to return Promise<any> - Array.map() result
+            createQueries(() => ({
+                queries: Array(50).map((_, i) => ({
+                    queryKey: ['key', i],
+                    queryFn: () => fetch('return Promise<any>').then((resp) => resp.json()),
+                })),
+            }));
+            // supports queryFn using fetch() to return Promise<any> - array literal
+            createQueries(() => ({
+                queries: [
+                    {
+                        queryKey: key1,
+                        queryFn: () => fetch('return Promise<any>').then((resp) => resp.json()),
+                    },
+                ],
+            }));
+        }
+    });
+    it('handles strongly typed queryFn factories and useQueries wrappers', () => {
+        const getQueryKeyA = () => ['queryA'];
+        const getQueryFunctionA = () => async () => {
+            return 1;
+        };
+        const getSelectorA = () => (data) => [data, data.toString()];
+        const getQueryKeyB = (id) => ['queryB', id];
+        const getQueryFunctionB = () => async () => {
+            return '1';
+        };
+        const getSelectorB = () => (data) => [data, +data];
+        // Wrapper with strongly typed array-parameter
+        function useWrappedQueries(queries) {
+            return createQueries(() => ({
+                queries: queries.map(
+                // no need to type the mapped query
+                (query) => {
+                    const { queryFn: fn, queryKey: key } = query;
+                    expectType(fn);
+                    return {
+                        queryKey: key,
+                        queryFn: fn
+                            ? (ctx) => {
+                                expectType(ctx.queryKey);
+                                return fn.call({}, ctx);
+                            }
+                            : undefined,
+                    };
+                }),
+            }));
+        }
+        // @ts-expect-error (Page component is not rendered)
+        // eslint-disable-next-line
+        function Page() {
+            const result = createQueries(() => ({
+                queries: [
+                    {
+                        queryKey: getQueryKeyA(),
+                        queryFn: getQueryFunctionA(),
+                    },
+                    {
+                        queryKey: getQueryKeyB('id'),
+                        queryFn: getQueryFunctionB(),
+                    },
+                ],
+            }));
+            expectType(result[0]);
+            expectType(result[1]);
+            const withSelector = createQueries(() => ({
+                queries: [
+                    {
+                        queryKey: getQueryKeyA(),
+                        queryFn: getQueryFunctionA(),
+                        select: getSelectorA(),
+                    },
+                    {
+                        queryKey: getQueryKeyB('id'),
+                        queryFn: getQueryFunctionB(),
+                        select: getSelectorB(),
+                    },
+                ],
+            }));
+            expectType(withSelector[0]);
+            expectType(withSelector[1]);
+            const withWrappedQueries = useWrappedQueries(Array(10).map(() => ({
+                queryKey: getQueryKeyA(),
+                queryFn: getQueryFunctionA(),
+                select: getSelectorA(),
+            })));
+            expectType(withWrappedQueries);
+        }
+    });
+    it('should not change state if unmounted', async () => {
+        const key1 = queryKey();
+        // We have to mock the QueriesObserver to not unsubscribe
+        // the listener when the component is unmounted
+        class QueriesObserverMock extends QueriesObserver {
+            subscribe(listener) {
+                super.subscribe(listener);
+                return () => void 0;
+            }
+        }
+        const QueriesObserverSpy = vi
+            .spyOn(QueriesObserverModule, 'QueriesObserver')
+            .mockImplementation((fn) => {
+            return new QueriesObserverMock(fn, []);
+        });
+        function Queries() {
+            createQueries(() => ({
+                queries: [
+                    {
+                        queryKey: key1,
+                        queryFn: async () => {
+                            await sleep(10);
+                            return 1;
+                        },
+                    },
+                ],
+            }));
+            return (<div>
+          <span>queries</span>
+        </div>);
+        }
+        function Page() {
+            const [mounted, setMounted] = createSignal(true);
+            return (<div>
+          <button onClick={() => setMounted(false)}>unmount</button>
+          {mounted() && <Queries />}
+        </div>);
+        }
+        render(() => (<QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>));
+        fireEvent.click(screen.getByText('unmount'));
+        // Should not display the console error
+        // "Warning: Can't perform a React state update on an unmounted component"
+        await sleep(20);
+        QueriesObserverSpy.mockRestore();
+    });
+});