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

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

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen, waitFor } from 'solid-testing-library';
 import { createQueryClient, sleep } from './utils';
 import { createEffect, createRenderEffect, createSignal, For, Index, Match, Switch, } from 'solid-js';
-import { createInfiniteQuery, QueryCache, QueryClientProvider } from '..';
+import { createInfiniteQuery, QueryCache, QueryClientProvider, keepPreviousData, } from '..';
 import { Blink, queryKey, setActTimeout } from './utils';
 const pageSize = 10;
 const fetchItems = async (page, ts, noNext, noPrev) => {
@@ -20,9 +20,12 @@ describe('useInfiniteQuery', () => {
         const key = queryKey();
         const states = [];
         function Page() {
-            const state = createInfiniteQuery(key, ({ pageParam = 0 }) => Number(pageParam), {
+            const state = createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn: ({ pageParam }) => Number(pageParam),
                 getNextPageParam: (lastPage) => lastPage + 1,
-            });
+                defaultPageParam: 0,
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -43,8 +46,8 @@ describe('useInfiniteQuery', () => {
             errorUpdateCount: 0,
             fetchNextPage: expect.any(Function),
             fetchPreviousPage: expect.any(Function),
-            hasNextPage: undefined,
-            hasPreviousPage: undefined,
+            hasNextPage: false,
+            hasPreviousPage: false,
             isError: false,
             isFetched: false,
             isFetchedAfterMount: false,
@@ -52,22 +55,21 @@ describe('useInfiniteQuery', () => {
             isPaused: false,
             isFetchingNextPage: false,
             isFetchingPreviousPage: false,
+            isPending: true,
             isLoading: true,
             isInitialLoading: true,
             isLoadingError: false,
             isPlaceholderData: false,
-            isPreviousData: false,
             isRefetchError: false,
             isRefetching: false,
             isStale: true,
             isSuccess: false,
             refetch: expect.any(Function),
-            remove: expect.any(Function),
-            status: 'loading',
+            status: 'pending',
             fetchStatus: 'fetching',
         });
         expect(states[1]).toEqual({
-            data: { pages: [0], pageParams: [undefined] },
+            data: { pages: [0], pageParams: [0] },
             dataUpdatedAt: expect.any(Number),
             error: null,
             errorUpdatedAt: 0,
@@ -77,7 +79,7 @@ describe('useInfiniteQuery', () => {
             fetchNextPage: expect.any(Function),
             fetchPreviousPage: expect.any(Function),
             hasNextPage: true,
-            hasPreviousPage: undefined,
+            hasPreviousPage: false,
             isError: false,
             isFetched: true,
             isFetchedAfterMount: true,
@@ -85,17 +87,16 @@ describe('useInfiniteQuery', () => {
             isPaused: false,
             isFetchingNextPage: false,
             isFetchingPreviousPage: false,
+            isPending: false,
             isLoading: false,
             isInitialLoading: false,
             isLoadingError: false,
             isPlaceholderData: false,
-            isPreviousData: false,
             isRefetchError: false,
             isRefetching: false,
             isStale: true,
             isSuccess: true,
             refetch: expect.any(Function),
-            remove: expect.any(Function),
             status: 'success',
             fetchStatus: 'idle',
         });
@@ -105,16 +106,19 @@ describe('useInfiniteQuery', () => {
         let noThrow;
         function Page() {
             const start = 1;
-            const state = createInfiniteQuery(key, async ({ pageParam = start }) => {
-                if (pageParam === 2) {
-                    throw new Error('error');
-                }
-                return Number(pageParam);
-            }, {
+            const state = createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn: async ({ pageParam }) => {
+                    if (pageParam === 2) {
+                        throw new Error('error');
+                    }
+                    return Number(pageParam);
+                },
                 retry: 1,
                 retryDelay: 10,
+                defaultPageParam: start,
                 getNextPageParam: (lastPage) => lastPage + 1,
-            });
+            }));
             createEffect(() => {
                 const fetchNextPage = state.fetchNextPage;
                 setActTimeout(() => {
@@ -132,19 +136,22 @@ describe('useInfiniteQuery', () => {
       </QueryClientProvider>));
         await waitFor(() => expect(noThrow).toBe(true));
     });
-    it('should keep the previous data when keepPreviousData is set', async () => {
+    it('should keep the previous data when placeholderData is set', async () => {
         const key = queryKey();
         const states = [];
         function Page() {
             const [order, setOrder] = createSignal('desc');
-            const state = createInfiniteQuery(() => [key(), order()], async ({ pageParam = 0 }) => {
-                await sleep(10);
-                return `${pageParam}-${order()}`;
-            }, {
+            const state = createInfiniteQuery(() => ({
+                queryKey: [key, order()],
+                queryFn: async ({ pageParam }) => {
+                    await sleep(10);
+                    return `${pageParam}-${order()}`;
+                },
                 getNextPageParam: () => 1,
-                keepPreviousData: true,
+                defaultPageParam: 0,
+                placeholderData: keepPreviousData,
                 notifyOnChangeProps: 'all',
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -170,28 +177,28 @@ describe('useInfiniteQuery', () => {
             isFetching: true,
             isFetchingNextPage: false,
             isSuccess: false,
-            isPreviousData: false,
+            isPlaceholderData: false,
         });
         expect(states[1]).toMatchObject({
             data: { pages: ['0-desc'] },
             isFetching: false,
             isFetchingNextPage: false,
             isSuccess: true,
-            isPreviousData: false,
+            isPlaceholderData: false,
         });
         expect(states[2]).toMatchObject({
             data: { pages: ['0-desc'] },
             isFetching: true,
             isFetchingNextPage: true,
             isSuccess: true,
-            isPreviousData: false,
+            isPlaceholderData: false,
         });
         expect(states[3]).toMatchObject({
             data: { pages: ['0-desc', '1-desc'] },
             isFetching: false,
             isFetchingNextPage: false,
             isSuccess: true,
-            isPreviousData: false,
+            isPlaceholderData: false,
         });
         // Set state
         expect(states[4]).toMatchObject({
@@ -199,26 +206,30 @@ describe('useInfiniteQuery', () => {
             isFetching: true,
             isFetchingNextPage: false,
             isSuccess: true,
-            isPreviousData: true,
+            isPlaceholderData: true,
         });
         expect(states[5]).toMatchObject({
             data: { pages: ['0-asc'] },
             isFetching: false,
             isFetchingNextPage: false,
             isSuccess: true,
-            isPreviousData: false,
+            isPlaceholderData: false,
         });
     });
     it('should be able to select a part of the data', async () => {
         const key = queryKey();
         const states = [];
         function Page() {
-            const state = createInfiniteQuery(key, () => ({ count: 1 }), {
+            const state = createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn: () => ({ count: 1 }),
                 select: (data) => ({
                     pages: data.pages.map((x) => `count: ${x.count}`),
                     pageParams: data.pageParams,
                 }),
-            });
+                getNextPageParam: () => undefined,
+                defaultPageParam: 0,
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -243,7 +254,9 @@ describe('useInfiniteQuery', () => {
         const states = [];
         let selectCalled = 0;
         function Page() {
-            const state = createInfiniteQuery(key, () => ({ count: 1 }), {
+            const state = createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn: () => ({ count: 1 }),
                 select: (data) => {
                     selectCalled++;
                     return {
@@ -251,7 +264,9 @@ describe('useInfiniteQuery', () => {
                         pageParams: data.pageParams,
                     };
                 },
-            });
+                getNextPageParam: () => undefined,
+                defaultPageParam: 0,
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -276,23 +291,25 @@ describe('useInfiniteQuery', () => {
         const key = queryKey();
         const states = [];
         function Page() {
-            const state = createInfiniteQuery(key, async ({ pageParam = 0 }) => {
-                await sleep(10);
-                return Number(pageParam);
-            }, {
+            const state = createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn: async ({ pageParam }) => {
+                    await sleep(10);
+                    return Number(pageParam);
+                },
                 select: (data) => ({
                     pages: [...data.pages].reverse(),
                     pageParams: [...data.pageParams].reverse(),
                 }),
                 notifyOnChangeProps: 'all',
-            });
+                getNextPageParam: () => 1,
+                defaultPageParam: 0,
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
             return (<div>
-          <button onClick={() => state.fetchNextPage({ pageParam: 1 })}>
-            fetchNextPage
-          </button>
+          <button onClick={() => state.fetchNextPage()}>fetchNextPage</button>
           <div>data: {state.data?.pages.join(',') ?? 'null'}</div>
           <div>isFetching: {state.isFetching}</div>
         </div>);
@@ -326,13 +343,17 @@ describe('useInfiniteQuery', () => {
         const states = [];
         function Page() {
             const start = 10;
-            const state = createInfiniteQuery(key, async ({ pageParam = start }) => {
-                await sleep(10);
-                return Number(pageParam);
-            }, {
+            const state = createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn: async ({ pageParam }) => {
+                    await sleep(10);
+                    return Number(pageParam);
+                },
+                getNextPageParam: (lastPage) => lastPage + 1,
                 getPreviousPageParam: (firstPage) => firstPage - 1,
+                defaultPageParam: start,
                 notifyOnChangeProps: 'all',
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -351,8 +372,8 @@ describe('useInfiniteQuery', () => {
         expect(states.length).toBe(4);
         expect(states[0]).toMatchObject({
             data: undefined,
-            hasNextPage: undefined,
-            hasPreviousPage: undefined,
+            hasNextPage: false,
+            hasPreviousPage: false,
             isFetching: true,
             isFetchingNextPage: false,
             isFetchingPreviousPage: false,
@@ -360,7 +381,7 @@ describe('useInfiniteQuery', () => {
         });
         expect(states[1]).toMatchObject({
             data: { pages: [10] },
-            hasNextPage: undefined,
+            hasNextPage: true,
             hasPreviousPage: true,
             isFetching: false,
             isFetchingNextPage: false,
@@ -369,7 +390,7 @@ describe('useInfiniteQuery', () => {
         });
         expect(states[2]).toMatchObject({
             data: { pages: [10] },
-            hasNextPage: undefined,
+            hasNextPage: true,
             hasPreviousPage: true,
             isFetching: true,
             isFetchingNextPage: false,
@@ -378,7 +399,7 @@ describe('useInfiniteQuery', () => {
         });
         expect(states[3]).toMatchObject({
             data: { pages: [9, 10] },
-            hasNextPage: undefined,
+            hasNextPage: true,
             hasPreviousPage: true,
             isFetching: false,
             isFetchingNextPage: false,
@@ -386,113 +407,21 @@ describe('useInfiniteQuery', () => {
             isSuccess: true,
         });
     });
-    it('should be able to refetch when providing page params manually', async () => {
-        const key = queryKey();
-        const states = [];
-        function Page() {
-            const state = createInfiniteQuery(key, async ({ pageParam = 10 }) => {
-                await sleep(10);
-                return Number(pageParam);
-            });
-            createRenderEffect(() => {
-                states.push({ ...state });
-            });
-            return (<div>
-          <button onClick={() => state.fetchNextPage({ pageParam: 11 })}>
-            fetchNextPage
-          </button>
-          <button onClick={() => state.fetchPreviousPage({ pageParam: 9 })}>
-            fetchPreviousPage
-          </button>
-          <button onClick={() => state.refetch()}>refetch</button>
-          <div>data: {state.data?.pages.join(',') ?? 'null'}</div>
-          <div>isFetching: {String(state.isFetching)}</div>
-        </div>);
-        }
-        render(() => (<QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>));
-        await waitFor(() => screen.getByText('data: 10'));
-        fireEvent.click(screen.getByRole('button', { name: /fetchNextPage/i }));
-        await waitFor(() => screen.getByText('data: 10,11'));
-        fireEvent.click(screen.getByRole('button', { name: /fetchPreviousPage/i }));
-        await waitFor(() => screen.getByText('data: 9,10,11'));
-        fireEvent.click(screen.getByRole('button', { name: /refetch/i }));
-        await waitFor(() => screen.getByText('isFetching: false'));
-        await waitFor(() => expect(states.length).toBe(8));
-        // Initial fetch
-        expect(states[0]).toMatchObject({
-            data: undefined,
-            isFetching: true,
-            isFetchingNextPage: false,
-            isRefetching: false,
-        });
-        // Initial fetch done
-        expect(states[1]).toMatchObject({
-            data: { pages: [10] },
-            isFetching: false,
-            isFetchingNextPage: false,
-            isRefetching: false,
-        });
-        // Fetch next page
-        expect(states[2]).toMatchObject({
-            data: { pages: [10] },
-            isFetching: true,
-            isFetchingNextPage: true,
-            isRefetching: false,
-        });
-        // Fetch next page done
-        expect(states[3]).toMatchObject({
-            data: { pages: [10, 11] },
-            isFetching: false,
-            isFetchingNextPage: false,
-            isRefetching: false,
-        });
-        // Fetch previous page
-        expect(states[4]).toMatchObject({
-            data: { pages: [10, 11] },
-            isFetching: true,
-            isFetchingNextPage: false,
-            isFetchingPreviousPage: true,
-            isRefetching: false,
-        });
-        // Fetch previous page done
-        expect(states[5]).toMatchObject({
-            data: { pages: [9, 10, 11] },
-            isFetching: false,
-            isFetchingNextPage: false,
-            isFetchingPreviousPage: false,
-            isRefetching: false,
-        });
-        // Refetch
-        expect(states[6]).toMatchObject({
-            data: { pages: [9, 10, 11] },
-            isFetching: true,
-            isFetchingNextPage: false,
-            isFetchingPreviousPage: false,
-            isRefetching: true,
-        });
-        // Refetch done
-        expect(states[7]).toMatchObject({
-            data: { pages: [9, 10, 11] },
-            isFetching: false,
-            isFetchingNextPage: false,
-            isFetchingPreviousPage: false,
-            isRefetching: false,
-        });
-    });
     it('should be able to refetch when providing page params automatically', async () => {
         const key = queryKey();
         const states = [];
         function Page() {
-            const state = createInfiniteQuery(key, async ({ pageParam = 10 }) => {
-                await sleep(10);
-                return Number(pageParam);
-            }, {
+            const state = createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn: async ({ pageParam }) => {
+                    await sleep(10);
+                    return Number(pageParam);
+                },
                 getPreviousPageParam: (firstPage) => firstPage - 1,
                 getNextPageParam: (lastPage) => lastPage + 1,
+                defaultPageParam: 10,
                 notifyOnChangeProps: 'all',
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -578,94 +507,21 @@ describe('useInfiniteQuery', () => {
             isRefetching: false,
         });
     });
-    it('should be able to refetch only specific pages when refetchPages is provided', async () => {
-        const key = queryKey();
-        const states = [];
-        function Page() {
-            let multiplier = 1;
-            const state = createInfiniteQuery(key, async ({ pageParam = 10 }) => {
-                await sleep(10);
-                return Number(pageParam) * multiplier;
-            }, {
-                getNextPageParam: (lastPage) => lastPage + 1,
-                notifyOnChangeProps: 'all',
-            });
-            createRenderEffect(() => {
-                states.push({ ...state });
-            });
-            return (<div>
-          <button onClick={() => state.fetchNextPage()}>fetchNextPage</button>
-          <button onClick={() => {
-                    multiplier = 2;
-                    state.refetch({
-                        refetchPage: (_, index) => index === 0,
-                    });
-                }}>
-            refetchPage
-          </button>
-          <div>data: {state.data?.pages.join(',') ?? 'null'}</div>
-          <div>isFetching: {String(state.isFetching)}</div>
-        </div>);
-        }
-        render(() => (<QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>));
-        await waitFor(() => screen.getByText('data: 10'));
-        fireEvent.click(screen.getByRole('button', { name: /fetchNextPage/i }));
-        await waitFor(() => screen.getByText('data: 10,11'));
-        fireEvent.click(screen.getByRole('button', { name: /refetchPage/i }));
-        await waitFor(() => screen.getByText('data: 20,11'));
-        await waitFor(() => screen.getByText('isFetching: false'));
-        await waitFor(() => expect(states.length).toBe(6));
-        // Initial fetch
-        expect(states[0]).toMatchObject({
-            data: undefined,
-            isFetching: true,
-            isFetchingNextPage: false,
-        });
-        // Initial fetch done
-        expect(states[1]).toMatchObject({
-            data: { pages: [10] },
-            isFetching: false,
-            isFetchingNextPage: false,
-        });
-        // Fetch next page
-        expect(states[2]).toMatchObject({
-            data: { pages: [10] },
-            isFetching: true,
-            isFetchingNextPage: true,
-        });
-        // Fetch next page done
-        expect(states[3]).toMatchObject({
-            data: { pages: [10, 11] },
-            isFetching: false,
-            isFetchingNextPage: false,
-        });
-        // Refetch
-        expect(states[4]).toMatchObject({
-            data: { pages: [10, 11] },
-            isFetching: true,
-            isFetchingNextPage: false,
-        });
-        // Refetch done, only page one has been refetched and multiplied
-        expect(states[5]).toMatchObject({
-            data: { pages: [20, 11] },
-            isFetching: false,
-            isFetchingNextPage: false,
-        });
-    });
     it('should silently cancel any ongoing fetch when fetching more', async () => {
         const key = queryKey();
         const states = [];
         function Page() {
             const start = 10;
-            const state = createInfiniteQuery(key, async ({ pageParam = start }) => {
-                await sleep(50);
-                return Number(pageParam);
-            }, {
+            const state = createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn: async ({ pageParam }) => {
+                    await sleep(50);
+                    return Number(pageParam);
+                },
                 getNextPageParam: (lastPage) => lastPage + 1,
+                defaultPageParam: start,
                 notifyOnChangeProps: 'all',
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -686,7 +542,7 @@ describe('useInfiniteQuery', () => {
         await sleep(300);
         expect(states.length).toBe(5);
         expect(states[0]).toMatchObject({
-            hasNextPage: undefined,
+            hasNextPage: false,
             data: undefined,
             isFetching: true,
             isFetchingNextPage: false,
@@ -726,22 +582,23 @@ describe('useInfiniteQuery', () => {
         const start = 10;
         const onAborts = [];
         const abortListeners = [];
-        const fetchPage = jest.fn(async ({ pageParam = start, signal }) => {
-            if (signal) {
-                const onAbort = jest.fn();
-                const abortListener = jest.fn();
-                onAborts.push(onAbort);
-                abortListeners.push(abortListener);
-                signal.onabort = onAbort;
-                signal.addEventListener('abort', abortListener);
-            }
+        const fetchPage = jest.fn(async ({ pageParam, signal }) => {
+            const onAbort = jest.fn();
+            const abortListener = jest.fn();
+            onAborts.push(onAbort);
+            abortListeners.push(abortListener);
+            signal.onabort = onAbort;
+            signal.addEventListener('abort', abortListener);
             await sleep(50);
             return Number(pageParam);
         });
         function Page() {
-            const state = createInfiniteQuery(key, fetchPage, {
+            const state = createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn: fetchPage,
                 getNextPageParam: (lastPage) => lastPage + 1,
-            });
+                defaultPageParam: start,
+            }));
             createEffect(() => {
                 const { fetchNextPage } = state;
                 setActTimeout(() => {
@@ -763,26 +620,26 @@ describe('useInfiniteQuery', () => {
         expect(abortListeners).toHaveLength(expectedCallCount);
         let callIndex = 0;
         const firstCtx = fetchPage.mock.calls[callIndex][0];
-        expect(firstCtx.pageParam).toBeUndefined();
-        expect(firstCtx.queryKey).toEqual(key());
+        expect(firstCtx.pageParam).toEqual(start);
+        expect(firstCtx.queryKey).toEqual(key);
         expect(firstCtx.signal).toBeInstanceOf(AbortSignal);
-        expect(firstCtx.signal?.aborted).toBe(false);
+        expect(firstCtx.signal.aborted).toBe(false);
         expect(onAborts[callIndex]).not.toHaveBeenCalled();
         expect(abortListeners[callIndex]).not.toHaveBeenCalled();
         callIndex = 1;
         const secondCtx = fetchPage.mock.calls[callIndex][0];
         expect(secondCtx.pageParam).toBe(11);
-        expect(secondCtx.queryKey).toEqual(key());
+        expect(secondCtx.queryKey).toEqual(key);
         expect(secondCtx.signal).toBeInstanceOf(AbortSignal);
-        expect(secondCtx.signal?.aborted).toBe(true);
+        expect(secondCtx.signal.aborted).toBe(true);
         expect(onAborts[callIndex]).toHaveBeenCalledTimes(1);
         expect(abortListeners[callIndex]).toHaveBeenCalledTimes(1);
         callIndex = 2;
         const thirdCtx = fetchPage.mock.calls[callIndex][0];
         expect(thirdCtx.pageParam).toBe(11);
-        expect(thirdCtx.queryKey).toEqual(key());
+        expect(thirdCtx.queryKey).toEqual(key);
         expect(thirdCtx.signal).toBeInstanceOf(AbortSignal);
-        expect(thirdCtx.signal?.aborted).toBe(false);
+        expect(thirdCtx.signal.aborted).toBe(false);
         expect(onAborts[callIndex]).not.toHaveBeenCalled();
         expect(abortListeners[callIndex]).not.toHaveBeenCalled();
     });
@@ -791,22 +648,23 @@ describe('useInfiniteQuery', () => {
         const start = 10;
         const onAborts = [];
         const abortListeners = [];
-        const fetchPage = jest.fn(async ({ pageParam = start, signal }) => {
-            if (signal) {
-                const onAbort = jest.fn();
-                const abortListener = jest.fn();
-                onAborts.push(onAbort);
-                abortListeners.push(abortListener);
-                signal.onabort = onAbort;
-                signal.addEventListener('abort', abortListener);
-            }
+        const fetchPage = jest.fn(async ({ pageParam, signal }) => {
+            const onAbort = jest.fn();
+            const abortListener = jest.fn();
+            onAborts.push(onAbort);
+            abortListeners.push(abortListener);
+            signal.onabort = onAbort;
+            signal.addEventListener('abort', abortListener);
             await sleep(50);
             return Number(pageParam);
         });
         function Page() {
-            const state = createInfiniteQuery(key, fetchPage, {
+            const state = createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn: fetchPage,
                 getNextPageParam: (lastPage) => lastPage + 1,
-            });
+                defaultPageParam: start,
+            }));
             createEffect(() => {
                 const { fetchNextPage } = state;
                 setActTimeout(() => {
@@ -828,18 +686,18 @@ describe('useInfiniteQuery', () => {
         expect(abortListeners).toHaveLength(expectedCallCount);
         let callIndex = 0;
         const firstCtx = fetchPage.mock.calls[callIndex][0];
-        expect(firstCtx.pageParam).toBeUndefined();
-        expect(firstCtx.queryKey).toEqual(key());
+        expect(firstCtx.pageParam).toEqual(start);
+        expect(firstCtx.queryKey).toEqual(key);
         expect(firstCtx.signal).toBeInstanceOf(AbortSignal);
-        expect(firstCtx.signal?.aborted).toBe(false);
+        expect(firstCtx.signal.aborted).toBe(false);
         expect(onAborts[callIndex]).not.toHaveBeenCalled();
         expect(abortListeners[callIndex]).not.toHaveBeenCalled();
         callIndex = 1;
         const secondCtx = fetchPage.mock.calls[callIndex][0];
         expect(secondCtx.pageParam).toBe(11);
-        expect(secondCtx.queryKey).toEqual(key());
+        expect(secondCtx.queryKey).toEqual(key);
         expect(secondCtx.signal).toBeInstanceOf(AbortSignal);
-        expect(secondCtx.signal?.aborted).toBe(false);
+        expect(secondCtx.signal.aborted).toBe(false);
         expect(onAborts[callIndex]).not.toHaveBeenCalled();
         expect(abortListeners[callIndex]).not.toHaveBeenCalled();
     });
@@ -848,13 +706,16 @@ describe('useInfiniteQuery', () => {
         const states = [];
         function Page() {
             const start = 10;
-            const state = createInfiniteQuery(key, async ({ pageParam = start }) => {
-                await sleep(50);
-                return Number(pageParam);
-            }, {
+            const state = createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn: async ({ pageParam }) => {
+                    await sleep(50);
+                    return Number(pageParam);
+                },
                 getNextPageParam: (lastPage) => lastPage + 1,
+                defaultPageParam: start,
                 notifyOnChangeProps: 'all',
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -872,7 +733,7 @@ describe('useInfiniteQuery', () => {
         await sleep(100);
         expect(states.length).toBe(2);
         expect(states[0]).toMatchObject({
-            hasNextPage: undefined,
+            hasNextPage: false,
             data: undefined,
             isFetching: true,
             isFetchingNextPage: false,
@@ -891,16 +752,19 @@ describe('useInfiniteQuery', () => {
         let fetches = 0;
         const initialData = { pages: [1, 2, 3, 4], pageParams: [0, 1, 2, 3] };
         function List() {
-            createInfiniteQuery(key, async ({ pageParam = 0, signal: _ }) => {
-                fetches++;
-                await sleep(50);
-                return Number(pageParam) * 10;
-            }, {
+            createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn: async ({ pageParam, signal: _ }) => {
+                    fetches++;
+                    await sleep(50);
+                    return Number(pageParam) * 10;
+                },
                 initialData,
                 getNextPageParam: (_, allPages) => {
                     return allPages.length === 4 ? undefined : allPages.length;
                 },
-            });
+                defaultPageParam: 0,
+            }));
             return null;
         }
         function Page() {
@@ -917,87 +781,34 @@ describe('useInfiniteQuery', () => {
       </QueryClientProvider>));
         await sleep(300);
         expect(fetches).toBe(2);
-        expect(queryClient.getQueryState(key())).toMatchObject({
+        expect(queryClient.getQueryState(key)).toMatchObject({
             data: initialData,
             status: 'success',
             error: null,
         });
     });
-    it('should be able to override the cursor in the fetchNextPage callback', async () => {
-        const key = queryKey();
-        const states = [];
-        function Page() {
-            const state = createInfiniteQuery(key, async ({ pageParam = 0 }) => {
-                await sleep(10);
-                return Number(pageParam);
-            }, {
-                getNextPageParam: (lastPage) => lastPage + 1,
-                notifyOnChangeProps: 'all',
-            });
-            createRenderEffect(() => {
-                states.push({ ...state });
-            });
-            createEffect(() => {
-                const { fetchNextPage } = state;
-                setActTimeout(() => {
-                    fetchNextPage({ pageParam: 5 });
-                }, 20);
-            });
-            return null;
-        }
-        render(() => (<QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>));
-        await sleep(100);
-        expect(states.length).toBe(4);
-        expect(states[0]).toMatchObject({
-            hasNextPage: undefined,
-            data: undefined,
-            isFetching: true,
-            isFetchingNextPage: false,
-            isSuccess: false,
-        });
-        expect(states[1]).toMatchObject({
-            hasNextPage: true,
-            data: { pages: [0] },
-            isFetching: false,
-            isFetchingNextPage: false,
-            isSuccess: true,
-        });
-        expect(states[2]).toMatchObject({
-            hasNextPage: true,
-            data: { pages: [0] },
-            isFetching: true,
-            isFetchingNextPage: true,
-            isSuccess: true,
-        });
-        expect(states[3]).toMatchObject({
-            hasNextPage: true,
-            data: { pages: [0, 5] },
-            isFetching: false,
-            isFetchingNextPage: false,
-            isSuccess: true,
-        });
-    });
     it('should be able to set new pages with the query client', async () => {
         const key = queryKey();
         const states = [];
         function Page() {
             const [firstPage, setFirstPage] = createSignal(0);
-            const state = createInfiniteQuery(key, async ({ pageParam = firstPage() }) => {
-                await sleep(10);
-                return Number(pageParam);
-            }, {
+            const state = createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn: async ({ pageParam }) => {
+                    await sleep(10);
+                    return Number(pageParam);
+                },
                 getNextPageParam: (lastPage) => lastPage + 1,
                 notifyOnChangeProps: 'all',
-            });
+                defaultPageParam: firstPage(),
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
             createEffect(() => {
                 const { refetch } = state;
                 setActTimeout(() => {
-                    queryClient.setQueryData(key(), { pages: [7, 8], pageParams: [7, 8] });
+                    queryClient.setQueryData(key, { pages: [7, 8], pageParams: [7, 8] });
                     setFirstPage(7);
                 }, 20);
                 setActTimeout(() => {
@@ -1012,7 +823,7 @@ describe('useInfiniteQuery', () => {
         await sleep(100);
         expect(states.length).toBe(5);
         expect(states[0]).toMatchObject({
-            hasNextPage: undefined,
+            hasNextPage: false,
             data: undefined,
             isFetching: true,
             isFetchingNextPage: false,
@@ -1055,14 +866,17 @@ describe('useInfiniteQuery', () => {
         const key = queryKey();
         const states = [];
         function Page() {
-            const state = createInfiniteQuery(key, async ({ pageParam }) => {
-                await sleep(10);
-                return pageParam;
-            }, {
+            const state = createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn: async ({ pageParam }) => {
+                    await sleep(10);
+                    return pageParam;
+                },
                 initialData: { pages: [1], pageParams: [1] },
                 getNextPageParam: (lastPage) => lastPage + 1,
+                defaultPageParam: 0,
                 notifyOnChangeProps: 'all',
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -1112,9 +926,12 @@ describe('useInfiniteQuery', () => {
         const key = queryKey();
         const states = [];
         function Page() {
-            const state = createInfiniteQuery(key, ({ pageParam = 1 }) => Number(pageParam), {
+            const state = createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn: ({ pageParam }) => Number(pageParam),
+                defaultPageParam: 1,
                 getNextPageParam: () => undefined,
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -1127,7 +944,7 @@ describe('useInfiniteQuery', () => {
         expect(states.length).toBe(2);
         expect(states[0]).toMatchObject({
             data: undefined,
-            hasNextPage: undefined,
+            hasNextPage: false,
             isFetching: true,
             isFetchingNextPage: false,
             isSuccess: false,
@@ -1144,10 +961,13 @@ describe('useInfiniteQuery', () => {
         const key = queryKey();
         const states = [];
         function Page() {
-            const state = createInfiniteQuery(key, ({ pageParam = 10 }) => pageParam, {
-                initialData: { pages: [10], pageParams: [undefined] },
+            const state = createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn: ({ pageParam }) => pageParam,
+                defaultPageParam: 10,
+                initialData: { pages: [10], pageParams: [10] },
                 getNextPageParam: (lastPage) => (lastPage === 10 ? 11 : undefined),
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -1177,10 +997,13 @@ describe('useInfiniteQuery', () => {
         const key = queryKey();
         const states = [];
         function Page() {
-            const state = createInfiniteQuery(key, ({ pageParam = 10 }) => pageParam, {
-                initialData: { pages: [10], pageParams: [undefined] },
+            const state = createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn: ({ pageParam }) => pageParam,
+                defaultPageParam: 10,
+                initialData: { pages: [10], pageParams: [10] },
                 getNextPageParam: () => undefined,
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -1210,13 +1033,16 @@ describe('useInfiniteQuery', () => {
         const key = queryKey();
         const states = [];
         function Page() {
-            const state = createInfiniteQuery(key, ({ pageParam = 1 }) => Number(pageParam), {
-                getNextPageParam: (lastPage) => (lastPage === 1 ? 2 : false),
+            const state = createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn: ({ pageParam }) => Number(pageParam),
+                defaultPageParam: 1,
+                getNextPageParam: (lastPage) => (lastPage === 1 ? 2 : undefined),
                 select: (data) => ({
                     pages: data.pages.map((x) => x.toString()),
                     pageParams: data.pageParams,
                 }),
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -1229,7 +1055,7 @@ describe('useInfiniteQuery', () => {
         expect(states.length).toBe(2);
         expect(states[0]).toMatchObject({
             data: undefined,
-            hasNextPage: undefined,
+            hasNextPage: false,
             isFetching: true,
             isFetchingNextPage: false,
             isSuccess: false,
@@ -1257,9 +1083,12 @@ describe('useInfiniteQuery', () => {
         };
         function Page() {
             let fetchCountRef = 0;
-            const state = createInfiniteQuery(key, ({ pageParam = 0 }) => fetchItemsWithLimit(pageParam, fetchCountRef++), {
+            const state = createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn: ({ pageParam }) => fetchItemsWithLimit(pageParam, fetchCountRef++),
+                defaultPageParam: 0,
                 getNextPageParam: (lastPage) => lastPage.nextId,
-            });
+            }));
             return (<div>
           <h1>Pagination</h1>
           <Switch fallback={<>
@@ -1291,7 +1120,7 @@ describe('useInfiniteQuery', () => {
                         // makes an actual network request
                         // and calls invalidateQueries in an onSuccess
                         items.splice(4, 1);
-                        queryClient.invalidateQueries(key());
+                        queryClient.invalidateQueries({ queryKey: key });
                     }}>
                     Remove item
                   </button>
@@ -1300,7 +1129,7 @@ describe('useInfiniteQuery', () => {
                   {!state.isFetchingNextPage ? 'Background Updating...' : null}
                 </div>
               </>}>
-            <Match when={state.status === 'loading'}>Loading...</Match>
+            <Match when={state.status === 'pending'}>Loading...</Match>
             <Match when={state.status === 'error'}>
               <span>Error: {state.error.message}</span>
             </Match>
@@ -1349,9 +1178,12 @@ describe('useInfiniteQuery', () => {
         function Page() {
             let fetchCountRef = 0;
             const [isRemovedLastPage, setIsRemovedLastPage] = createSignal(false);
-            const state = createInfiniteQuery(key, ({ pageParam = 0 }) => fetchItems(pageParam, fetchCountRef++, pageParam === MAX || (pageParam === MAX - 1 && isRemovedLastPage())), {
+            const state = createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn: ({ pageParam }) => fetchItems(pageParam, fetchCountRef++, pageParam === MAX || (pageParam === MAX - 1 && isRemovedLastPage())),
+                defaultPageParam: 0,
                 getNextPageParam: (lastPage) => lastPage.nextId,
-            });
+            }));
             return (<div>
           <h1>Pagination</h1>
           <Switch fallback={<>
@@ -1387,7 +1219,7 @@ describe('useInfiniteQuery', () => {
                         : null}
                 </div>
               </>}>
-            <Match when={state.status === 'loading'}>Loading...</Match>
+            <Match when={state.status === 'pending'}>Loading...</Match>
             <Match when={state.status === 'error'}>
               <span>Error: {state.error.message}</span>
             </Match>
@@ -1442,7 +1274,12 @@ describe('useInfiniteQuery', () => {
             return promise;
         };
         function Page() {
-            const state = createInfiniteQuery(key, queryFn);
+            const state = createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn,
+                getNextPageParam: () => undefined,
+                defaultPageParam: 0,
+            }));
             return (<div>
           <h1>Status: {state.status}</h1>
         </div>);
@@ -1455,4 +1292,23 @@ describe('useInfiniteQuery', () => {
         await waitFor(() => screen.getByText('off'));
         expect(cancelFn).toHaveBeenCalled();
     });
+    it('should use provided custom queryClient', async () => {
+        const key = queryKey();
+        const queryFn = () => {
+            return Promise.resolve('custom client');
+        };
+        function Page() {
+            const state = createInfiniteQuery(() => ({
+                queryKey: key,
+                queryFn,
+                getNextPageParam: () => undefined,
+                defaultPageParam: 0,
+            }), () => queryClient);
+            return (<div>
+          <h1>Status: {state.data?.pages[0]}</h1>
+        </div>);
+        }
+        render(() => <Page />);
+        await waitFor(() => screen.getByText('Status: custom client'));
+    });
 });