@tanstack/solid-query 5.0.0-alpha.7 → 5.0.0-alpha.70

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

@@ -1,661 +0,0 @@
-import { fireEvent, render, screen, waitFor } from 'solid-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();
-                        },
-                        onSuccess: (a) => {
-                            expectType(a);
-                            expectTypeNotAny(a);
-                        },
-                        placeholderData: 'string',
-                        // @ts-expect-error (initialData: string)
-                        initialData: 123,
-                    },
-                    {
-                        queryKey: key2,
-                        queryFn: () => 'string',
-                        select: (a) => {
-                            expectType(a);
-                            expectTypeNotAny(a);
-                            return parseInt(a);
-                        },
-                        onSuccess: (a) => {
-                            expectType(a);
-                            expectTypeNotAny(a);
-                        },
-                        onError: (e) => {
-                            expectType(e);
-                            expectTypeNotAny(e);
-                        },
-                        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();
-                        },
-                        onSuccess: (a) => {
-                            expectType(a);
-                            expectTypeNotAny(a);
-                        },
-                        placeholderData: 'string',
-                        // @ts-expect-error (initialData: string)
-                        initialData: 123,
-                    },
-                    {
-                        queryKey: key2,
-                        queryFn: () => 'string',
-                        select: (a) => {
-                            expectType(a);
-                            expectTypeNotAny(a);
-                            return parseInt(a);
-                        },
-                        onSuccess: (a) => {
-                            expectType(a);
-                            expectTypeNotAny(a);
-                        },
-                        onError: (e) => {
-                            expectType(e);
-                            expectTypeNotAny(e);
-                        },
-                        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 / onSuccess / onSettled params are "indirectly" enforced
-            createQueries(() => ({
-                queries: [
-                    // unfortunately TS will not suggest the type for you
-                    {
-                        queryKey: key1,
-                        queryFn: () => 'string',
-                        // @ts-expect-error (noImplicitAny)
-                        onSuccess: (a) => null,
-                        // @ts-expect-error (noImplicitAny)
-                        onSettled: (a) => null,
-                    },
-                    // however you can add a type to the callback
-                    {
-                        queryKey: key2,
-                        queryFn: () => 'string',
-                        onSuccess: (a) => {
-                            expectType(a);
-                            expectTypeNotAny(a);
-                        },
-                        onSettled: (a) => {
-                            expectType(a);
-                            expectTypeNotAny(a);
-                        },
-                    },
-                    // the type you do pass is enforced
-                    {
-                        queryKey: key3,
-                        queryFn: () => 'string',
-                        // @ts-expect-error (only accepts string)
-                        onSuccess: (a) => null,
-                    },
-                    {
-                        queryKey: key4,
-                        queryFn: () => 'string',
-                        select: (a) => parseInt(a),
-                        // @ts-expect-error (select is defined => only accepts number)
-                        onSuccess: (a) => null,
-                        onSettled: (a) => {
-                            expectType(a);
-                            expectTypeNotAny(a);
-                        },
-                    },
-                ],
-            }));
-            // callbacks are also indirectly enforced with Array.map
-            createQueries(() => ({
-                // @ts-expect-error (onSuccess only accepts string)
-                queries: Array(50).map((_, i) => ({
-                    queryKey: ['key', i],
-                    queryFn: () => i + 10,
-                    select: (data) => data.toString(),
-                    onSuccess: (_data) => null,
-                })),
-            }));
-            createQueries(() => ({
-                queries: Array(50).map((_, 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(() => ({
-                queries: [
-                    {
-                        queryKey: key1,
-                        queryFn: () => 'string',
-                        // @ts-expect-error (noImplicitAny)
-                        onSuccess: (a) => null,
-                        // @ts-expect-error (noImplicitAny)
-                        onSettled: (a) => null,
-                    },
-                    {
-                        queryKey: key2,
-                        queryFn: () => 'string',
-                        onSuccess: (a) => {
-                            expectType(a);
-                            expectTypeNotAny(a);
-                        },
-                        onSettled: (a) => {
-                            expectType(a);
-                            expectTypeNotAny(a);
-                        },
-                    },
-                    {
-                        queryKey: key4,
-                        queryFn: () => 'string',
-                        select: (a) => parseInt(a),
-                        onSuccess: (_a) => null,
-                        onSettled: (a) => {
-                            expectType(a);
-                            expectTypeNotAny(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'),
-                        onSuccess: (a) => {
-                            expectType(a);
-                            expectTypeNotAny(a);
-                        },
-                        // @ts-expect-error (refuses to accept a Promise)
-                        onSettled: (a) => null,
-                    },
-                ],
-            }));
-            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, onError: err } = query;
-                    expectType(fn);
-                    return {
-                        queryKey: key,
-                        onError: err,
-                        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();
-    });
-});