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

package/src/__tests__/createInfiniteQuery.test.tsx

@@ -16,7 +16,12 @@ import type {
   InfiniteData,
   QueryFunctionContext,
 } from '..'
-import { createInfiniteQuery, QueryCache, QueryClientProvider } from '..'
+import {
+  createInfiniteQuery,
+  QueryCache,
+  QueryClientProvider,
+  keepPreviousData,
+} from '..'
 import { Blink, queryKey, setActTimeout } from './utils'
 
 interface Result {
@@ -49,16 +54,15 @@ describe('useInfiniteQuery', () => {
 
   it('should return the correct states for a successful query', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
-      const state = createInfiniteQuery(
-        key,
-        ({ pageParam = 0 }) => Number(pageParam),
-        {
-          getNextPageParam: (lastPage) => lastPage + 1,
-        },
-      )
+      const state = createInfiniteQuery(() => ({
+        queryKey: key,
+        queryFn: ({ pageParam }) => Number(pageParam),
+        getNextPageParam: (lastPage) => lastPage + 1,
+        defaultPageParam: 0,
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -84,8 +88,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,
@@ -93,23 +97,22 @@ 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,
@@ -119,7 +122,7 @@ describe('useInfiniteQuery', () => {
       fetchNextPage: expect.any(Function),
       fetchPreviousPage: expect.any(Function),
       hasNextPage: true,
-      hasPreviousPage: undefined,
+      hasPreviousPage: false,
       isError: false,
       isFetched: true,
       isFetchedAfterMount: true,
@@ -127,17 +130,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',
     })
@@ -149,20 +151,20 @@ describe('useInfiniteQuery', () => {
 
     function Page() {
       const start = 1
-      const state = createInfiniteQuery(
-        key,
-        async ({ pageParam = start }) => {
+      const state = createInfiniteQuery(() => ({
+        queryKey: key,
+        queryFn: async ({ pageParam }) => {
           if (pageParam === 2) {
             throw new Error('error')
           }
           return Number(pageParam)
         },
-        {
-          retry: 1,
-          retryDelay: 10,
-          getNextPageParam: (lastPage) => lastPage + 1,
-        },
-      )
+
+        retry: 1,
+        retryDelay: 10,
+        defaultPageParam: start,
+        getNextPageParam: (lastPage) => lastPage + 1,
+      }))
 
       createEffect(() => {
         const fetchNextPage = state.fetchNextPage
@@ -187,25 +189,25 @@ describe('useInfiniteQuery', () => {
     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: CreateInfiniteQueryResult<string>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []
 
     function Page() {
       const [order, setOrder] = createSignal('desc')
 
-      const state = createInfiniteQuery(
-        () => [key(), order()],
-        async ({ pageParam = 0 }) => {
+      const state = createInfiniteQuery(() => ({
+        queryKey: [key, order()],
+        queryFn: async ({ pageParam }) => {
           await sleep(10)
           return `${pageParam}-${order()}`
         },
-        {
-          getNextPageParam: () => 1,
-          keepPreviousData: true,
-          notifyOnChangeProps: 'all',
-        },
-      )
+
+        getNextPageParam: () => 1,
+        defaultPageParam: 0,
+        placeholderData: keepPreviousData,
+        notifyOnChangeProps: 'all',
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -242,28 +244,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({
@@ -271,28 +273,32 @@ 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: CreateInfiniteQueryResult<string>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []
 
     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 })
       })
@@ -320,12 +326,15 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to select a new result and not cause infinite renders', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<{ count: number; id: number }>[] =
-      []
+    const states: CreateInfiniteQueryResult<
+      InfiniteData<{ count: number; id: number }>
+    >[] = []
     let selectCalled = 0
 
     function Page() {
-      const state = createInfiniteQuery(key, () => ({ count: 1 }), {
+      const state = createInfiniteQuery(() => ({
+        queryKey: key,
+        queryFn: () => ({ count: 1 }),
         select: (data: InfiniteData<{ count: number }>) => {
           selectCalled++
           return {
@@ -333,7 +342,9 @@ describe('useInfiniteQuery', () => {
             pageParams: data.pageParams,
           }
         },
-      })
+        getNextPageParam: () => undefined,
+        defaultPageParam: 0,
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -362,23 +373,24 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to reverse the data', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
-      const state = createInfiniteQuery(
-        key,
-        async ({ pageParam = 0 }) => {
+      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',
-        },
-      )
+
+        select: (data) => ({
+          pages: [...data.pages].reverse(),
+          pageParams: [...data.pageParams].reverse(),
+        }),
+        notifyOnChangeProps: 'all',
+        getNextPageParam: () => 1,
+        defaultPageParam: 0,
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -386,9 +398,7 @@ describe('useInfiniteQuery', () => {
 
       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>
@@ -427,21 +437,21 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to fetch a previous page', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const start = 10
-      const state = createInfiniteQuery(
-        key,
-        async ({ pageParam = start }) => {
+      const state = createInfiniteQuery(() => ({
+        queryKey: key,
+        queryFn: async ({ pageParam }) => {
           await sleep(10)
           return Number(pageParam)
         },
-        {
-          getPreviousPageParam: (firstPage) => firstPage - 1,
-          notifyOnChangeProps: 'all',
-        },
-      )
+        getNextPageParam: (lastPage) => lastPage + 1,
+        getPreviousPageParam: (firstPage) => firstPage - 1,
+        defaultPageParam: start,
+        notifyOnChangeProps: 'all',
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -468,8 +478,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,
@@ -477,7 +487,7 @@ describe('useInfiniteQuery', () => {
     })
     expect(states[1]).toMatchObject({
       data: { pages: [10] },
-      hasNextPage: undefined,
+      hasNextPage: true,
       hasPreviousPage: true,
       isFetching: false,
       isFetchingNextPage: false,
@@ -486,7 +496,7 @@ describe('useInfiniteQuery', () => {
     })
     expect(states[2]).toMatchObject({
       data: { pages: [10] },
-      hasNextPage: undefined,
+      hasNextPage: true,
       hasPreviousPage: true,
       isFetching: true,
       isFetchingNextPage: false,
@@ -495,7 +505,7 @@ describe('useInfiniteQuery', () => {
     })
     expect(states[3]).toMatchObject({
       data: { pages: [9, 10] },
-      hasNextPage: undefined,
+      hasNextPage: true,
       hasPreviousPage: true,
       isFetching: false,
       isFetchingNextPage: false,
@@ -504,131 +514,23 @@ describe('useInfiniteQuery', () => {
     })
   })
 
-  it('should be able to refetch when providing page params manually', async () => {
-    const key = queryKey()
-    const states: CreateInfiniteQueryResult<number>[] = []
-
-    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: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
-      const state = createInfiniteQuery(
-        key,
-        async ({ pageParam = 10 }) => {
+      const state = createInfiniteQuery(() => ({
+        queryKey: key,
+        queryFn: async ({ pageParam }) => {
           await sleep(10)
           return Number(pageParam)
         },
-        {
-          getPreviousPageParam: (firstPage) => firstPage - 1,
-          getNextPageParam: (lastPage) => lastPage + 1,
-          notifyOnChangeProps: 'all',
-        },
-      )
+
+        getPreviousPageParam: (firstPage) => firstPage - 1,
+        getNextPageParam: (lastPage) => lastPage + 1,
+        defaultPageParam: 10,
+        notifyOnChangeProps: 'all',
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -726,118 +628,23 @@ describe('useInfiniteQuery', () => {
     })
   })
 
-  it('should be able to refetch only specific pages when refetchPages is provided', async () => {
-    const key = queryKey()
-    const states: CreateInfiniteQueryResult<number>[] = []
-
-    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: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const start = 10
-      const state = createInfiniteQuery(
-        key,
-        async ({ pageParam = start }) => {
+      const state = createInfiniteQuery(() => ({
+        queryKey: key,
+        queryFn: async ({ pageParam }) => {
           await sleep(50)
           return Number(pageParam)
         },
-        {
-          getNextPageParam: (lastPage) => lastPage + 1,
-          notifyOnChangeProps: 'all',
-        },
-      )
+
+        getNextPageParam: (lastPage) => lastPage + 1,
+        defaultPageParam: start,
+        notifyOnChangeProps: 'all',
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -866,7 +673,7 @@ describe('useInfiniteQuery', () => {
 
     expect(states.length).toBe(5)
     expect(states[0]).toMatchObject({
-      hasNextPage: undefined,
+      hasNextPage: false,
       data: undefined,
       isFetching: true,
       isFetchingNextPage: false,
@@ -909,24 +716,26 @@ describe('useInfiniteQuery', () => {
     const abortListeners: jest.Mock<any, any>[] = []
     const fetchPage = jest.fn<
       Promise<number>,
-      [QueryFunctionContext<ReturnType<typeof key>, number>]
-    >(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)
-      }
+      [QueryFunctionContext<typeof key, number>]
+    >(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
@@ -956,28 +765,28 @@ describe('useInfiniteQuery', () => {
 
     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()
   })
@@ -989,24 +798,26 @@ describe('useInfiniteQuery', () => {
     const abortListeners: jest.Mock<any, any>[] = []
     const fetchPage = jest.fn<
       Promise<number>,
-      [QueryFunctionContext<ReturnType<typeof key>, number>]
-    >(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)
-      }
+      [QueryFunctionContext<typeof key, number>]
+    >(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
@@ -1036,40 +847,40 @@ describe('useInfiniteQuery', () => {
 
     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()
   })
 
   it('should keep fetching first page when not loaded yet and triggering fetch more', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const start = 10
-      const state = createInfiniteQuery(
-        key,
-        async ({ pageParam = start }) => {
+      const state = createInfiniteQuery(() => ({
+        queryKey: key,
+        queryFn: async ({ pageParam }) => {
           await sleep(50)
           return Number(pageParam)
         },
-        {
-          getNextPageParam: (lastPage) => lastPage + 1,
-          notifyOnChangeProps: 'all',
-        },
-      )
+
+        getNextPageParam: (lastPage) => lastPage + 1,
+        defaultPageParam: start,
+        notifyOnChangeProps: 'all',
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -1095,7 +906,7 @@ describe('useInfiniteQuery', () => {
 
     expect(states.length).toBe(2)
     expect(states[0]).toMatchObject({
-      hasNextPage: undefined,
+      hasNextPage: false,
       data: undefined,
       isFetching: true,
       isFetchingNextPage: false,
@@ -1117,20 +928,20 @@ describe('useInfiniteQuery', () => {
     const initialData = { pages: [1, 2, 3, 4], pageParams: [0, 1, 2, 3] }
 
     function List() {
-      createInfiniteQuery(
-        key,
-        async ({ pageParam = 0, signal: _ }) => {
+      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
-          },
+
+        initialData,
+        getNextPageParam: (_, allPages) => {
+          return allPages.length === 4 ? undefined : allPages.length
         },
-      )
+        defaultPageParam: 0,
+      }))
 
       return null
     }
@@ -1156,101 +967,31 @@ describe('useInfiniteQuery', () => {
     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: CreateInfiniteQueryResult<number>[] = []
-
-    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: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const [firstPage, setFirstPage] = createSignal(0)
 
-      const state = createInfiniteQuery(
-        key,
-        async ({ pageParam = firstPage() }) => {
+      const state = createInfiniteQuery(() => ({
+        queryKey: key,
+        queryFn: async ({ pageParam }) => {
           await sleep(10)
           return Number(pageParam)
         },
-        {
-          getNextPageParam: (lastPage) => lastPage + 1,
-          notifyOnChangeProps: 'all',
-        },
-      )
+
+        getNextPageParam: (lastPage) => lastPage + 1,
+        notifyOnChangeProps: 'all',
+        defaultPageParam: firstPage(),
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -1259,7 +1000,7 @@ describe('useInfiniteQuery', () => {
       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)
 
@@ -1281,7 +1022,7 @@ describe('useInfiniteQuery', () => {
 
     expect(states.length).toBe(5)
     expect(states[0]).toMatchObject({
-      hasNextPage: undefined,
+      hasNextPage: false,
       data: undefined,
       isFetching: true,
       isFetchingNextPage: false,
@@ -1323,21 +1064,21 @@ describe('useInfiniteQuery', () => {
 
   it('should only refetch the first page when initialData is provided', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
-      const state = createInfiniteQuery(
-        key,
-        async ({ pageParam }): Promise<number> => {
+      const state = createInfiniteQuery(() => ({
+        queryKey: key,
+        queryFn: async ({ pageParam }): Promise<number> => {
           await sleep(10)
           return pageParam
         },
-        {
-          initialData: { pages: [1], pageParams: [1] },
-          getNextPageParam: (lastPage) => lastPage + 1,
-          notifyOnChangeProps: 'all',
-        },
-      )
+
+        initialData: { pages: [1], pageParams: [1] },
+        getNextPageParam: (lastPage) => lastPage + 1,
+        defaultPageParam: 0,
+        notifyOnChangeProps: 'all',
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -1394,16 +1135,15 @@ describe('useInfiniteQuery', () => {
 
   it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
-      const state = createInfiniteQuery(
-        key,
-        ({ pageParam = 1 }) => Number(pageParam),
-        {
-          getNextPageParam: () => undefined,
-        },
-      )
+      const state = createInfiniteQuery(() => ({
+        queryKey: key,
+        queryFn: ({ pageParam }) => Number(pageParam),
+        defaultPageParam: 1,
+        getNextPageParam: () => undefined,
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -1423,7 +1163,7 @@ describe('useInfiniteQuery', () => {
     expect(states.length).toBe(2)
     expect(states[0]).toMatchObject({
       data: undefined,
-      hasNextPage: undefined,
+      hasNextPage: false,
       isFetching: true,
       isFetchingNextPage: false,
       isSuccess: false,
@@ -1439,17 +1179,16 @@ describe('useInfiniteQuery', () => {
 
   it('should compute hasNextPage correctly using initialData', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
-      const state = createInfiniteQuery(
-        key,
-        ({ pageParam = 10 }): number => pageParam,
-        {
-          initialData: { pages: [10], pageParams: [undefined] },
-          getNextPageParam: (lastPage) => (lastPage === 10 ? 11 : undefined),
-        },
-      )
+      const state = createInfiniteQuery(() => ({
+        queryKey: key,
+        queryFn: ({ pageParam }): number => pageParam,
+        defaultPageParam: 10,
+        initialData: { pages: [10], pageParams: [10] },
+        getNextPageParam: (lastPage) => (lastPage === 10 ? 11 : undefined),
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -1484,17 +1223,16 @@ describe('useInfiniteQuery', () => {
 
   it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<number>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
-      const state = createInfiniteQuery(
-        key,
-        ({ pageParam = 10 }): number => pageParam,
-        {
-          initialData: { pages: [10], pageParams: [undefined] },
-          getNextPageParam: () => undefined,
-        },
-      )
+      const state = createInfiniteQuery(() => ({
+        queryKey: key,
+        queryFn: ({ pageParam }): number => pageParam,
+        defaultPageParam: 10,
+        initialData: { pages: [10], pageParams: [10] },
+        getNextPageParam: () => undefined,
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -1529,20 +1267,19 @@ describe('useInfiniteQuery', () => {
 
   it('should not use selected data when computing hasNextPage', async () => {
     const key = queryKey()
-    const states: CreateInfiniteQueryResult<string>[] = []
+    const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []
 
     function Page() {
-      const state = createInfiniteQuery(
-        key,
-        ({ pageParam = 1 }) => Number(pageParam),
-        {
-          getNextPageParam: (lastPage) => (lastPage === 1 ? 2 : false),
-          select: (data) => ({
-            pages: data.pages.map((x) => x.toString()),
-            pageParams: data.pageParams,
-          }),
-        },
-      )
+      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 })
@@ -1562,7 +1299,7 @@ describe('useInfiniteQuery', () => {
     expect(states.length).toBe(2)
     expect(states[0]).toMatchObject({
       data: undefined,
-      hasNextPage: undefined,
+      hasNextPage: false,
       isFetching: true,
       isFetchingNextPage: false,
       isSuccess: false,
@@ -1595,13 +1332,13 @@ describe('useInfiniteQuery', () => {
 
     function Page() {
       let fetchCountRef = 0
-      const state = createInfiniteQuery<Result, Error>(
-        key,
-        ({ pageParam = 0 }) => fetchItemsWithLimit(pageParam, fetchCountRef++),
-        {
-          getNextPageParam: (lastPage) => lastPage.nextId,
-        },
-      )
+      const state = createInfiniteQuery(() => ({
+        queryKey: key,
+        queryFn: ({ pageParam }) =>
+          fetchItemsWithLimit(pageParam, fetchCountRef++),
+        defaultPageParam: 0,
+        getNextPageParam: (lastPage) => lastPage.nextId,
+      }))
 
       return (
         <div>
@@ -1645,7 +1382,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
@@ -1657,7 +1394,7 @@ describe('useInfiniteQuery', () => {
               </>
             }
           >
-            <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>
@@ -1725,18 +1462,17 @@ describe('useInfiniteQuery', () => {
       let fetchCountRef = 0
       const [isRemovedLastPage, setIsRemovedLastPage] =
         createSignal<boolean>(false)
-      const state = createInfiniteQuery<Result, Error>(
-        key,
-        ({ pageParam = 0 }) =>
+      const state = createInfiniteQuery(() => ({
+        queryKey: key,
+        queryFn: ({ pageParam }) =>
           fetchItems(
             pageParam,
             fetchCountRef++,
             pageParam === MAX || (pageParam === MAX - 1 && isRemovedLastPage()),
           ),
-        {
-          getNextPageParam: (lastPage) => lastPage.nextId,
-        },
-      )
+        defaultPageParam: 0,
+        getNextPageParam: (lastPage) => lastPage.nextId,
+      }))
 
       return (
         <div>
@@ -1785,7 +1521,7 @@ describe('useInfiniteQuery', () => {
               </>
             }
           >
-            <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>
@@ -1864,7 +1600,12 @@ describe('useInfiniteQuery', () => {
     }
 
     function Page() {
-      const state = createInfiniteQuery(key, queryFn)
+      const state = createInfiniteQuery(() => ({
+        queryKey: key,
+        queryFn,
+        getNextPageParam: () => undefined,
+        defaultPageParam: 0,
+      }))
       return (
         <div>
           <h1>Status: {state.status}</h1>
@@ -1884,4 +1625,32 @@ describe('useInfiniteQuery', () => {
 
     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'))
+  })
 })