@tanstack/solid-query 4.39.0 → 4.39.2

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

@@ -0,0 +1,958 @@
+import { fireEvent, render, screen, waitFor } from 'solid-testing-library';
+import { ErrorBoundary, createContext, createMemo, createRenderEffect, createSignal, } from 'solid-js';
+import * as QueriesObserverModule from '../../../query-core/src/queriesObserver';
+import { QueriesObserver, QueryCache, QueryClientProvider, createQueries, } from '..';
+import { createQueryClient, expectType, expectTypeNotAny, queryKey, sleep, } from './utils';
+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('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();
+        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',
+                        // @ts-expect-error (invalidField)
+                        someInvalidField: [],
+                    },
+                ],
+            });
+        }
+    });
+    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',
+                        // @ts-expect-error (invalidField)
+                        someInvalidField: [],
+                    },
+                ],
+            });
+        }
+    });
+    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',
+                        // @ts-expect-error (invalidField)
+                        someInvalidField: [],
+                    },
+                ],
+            });
+            // 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',
+                        // @ts-expect-error (invalidField)
+                        someInvalidField: [],
+                    },
+                ],
+            });
+            // 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 = jest
+            .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();
+    });
+    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'));
+        });
+    });
+});