@tanstack/react-query 4.24.10 → 5.0.0-alpha.0

package/src/__tests__/useInfiniteQuery.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, waitFor } from '@testing-library/react'
+import { fireEvent, render, waitFor } from '@testing-library/react'
 import * as React from 'react'
 
 import {
@@ -13,7 +13,7 @@ import type {
   QueryFunctionContext,
   UseInfiniteQueryResult,
 } from '..'
-import { QueryCache, useInfiniteQuery } from '..'
+import { QueryCache, useInfiniteQuery, keepPreviousData } from '..'
 
 interface Result {
   items: number[]
@@ -45,16 +45,15 @@ describe('useInfiniteQuery', () => {
 
   it('should return the correct states for a successful query', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
-      const state = useInfiniteQuery(
-        key,
-        ({ pageParam = 0 }) => Number(pageParam),
-        {
-          getNextPageParam: (lastPage) => lastPage + 1,
-        },
-      )
+      const state = useInfiniteQuery({
+        queryKey: key,
+        queryFn: ({ pageParam }) => Number(pageParam),
+        getNextPageParam: (lastPage) => lastPage + 1,
+        defaultPageParam: 0,
+      })
       states.push(state)
       return null
     }
@@ -74,8 +73,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,
@@ -84,22 +83,21 @@ describe('useInfiniteQuery', () => {
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
       isLoading: true,
+      isPending: 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,
@@ -109,7 +107,7 @@ describe('useInfiniteQuery', () => {
       fetchNextPage: expect.any(Function),
       fetchPreviousPage: expect.any(Function),
       hasNextPage: true,
-      hasPreviousPage: undefined,
+      hasPreviousPage: false,
       isError: false,
       isFetched: true,
       isFetchedAfterMount: true,
@@ -118,16 +116,15 @@ describe('useInfiniteQuery', () => {
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
       isLoading: false,
+      isPending: 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',
     })
@@ -139,20 +136,19 @@ describe('useInfiniteQuery', () => {
 
     function Page() {
       const start = 1
-      const state = useInfiniteQuery(
-        key,
-        async ({ pageParam = start }) => {
+      const state = useInfiniteQuery({
+        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,
+        getNextPageParam: (lastPage) => lastPage + 1,
+        defaultPageParam: start,
+      })
 
       const { fetchNextPage } = state
 
@@ -174,25 +170,24 @@ 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: UseInfiniteQueryResult<string>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []
 
     function Page() {
       const [order, setOrder] = React.useState('desc')
 
-      const state = useInfiniteQuery(
-        [key, order],
-        async ({ pageParam = 0 }) => {
+      const state = useInfiniteQuery({
+        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',
+      })
 
       states.push(state)
 
@@ -223,28 +218,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({
@@ -252,7 +247,7 @@ describe('useInfiniteQuery', () => {
       isFetching: true,
       isFetchingNextPage: false,
       isSuccess: true,
-      isPreviousData: true,
+      isPlaceholderData: true,
     })
     // Hook state update
     expect(states[5]).toMatchObject({
@@ -260,27 +255,31 @@ describe('useInfiniteQuery', () => {
       isFetching: true,
       isFetchingNextPage: false,
       isSuccess: true,
-      isPreviousData: true,
+      isPlaceholderData: true,
     })
     expect(states[6]).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: UseInfiniteQueryResult<string>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []
 
     function Page() {
-      const state = useInfiniteQuery(key, () => ({ count: 1 }), {
+      const state = useInfiniteQuery({
+        queryKey: key,
+        queryFn: () => ({ count: 1 }),
         select: (data) => ({
           pages: data.pages.map((x) => `count: ${x.count}`),
           pageParams: data.pageParams,
         }),
+        getNextPageParam: () => undefined,
+        defaultPageParam: 0,
       })
       states.push(state)
 
@@ -306,11 +305,15 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to select a new result and not cause infinite renders', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<{ count: number; id: number }>[] = []
+    const states: UseInfiniteQueryResult<
+      InfiniteData<{ count: number; id: number }>
+    >[] = []
     let selectCalled = 0
 
     function Page() {
-      const state = useInfiniteQuery(key, () => ({ count: 1 }), {
+      const state = useInfiniteQuery({
+        queryKey: key,
+        queryFn: () => ({ count: 1 }),
         select: React.useCallback((data: InfiniteData<{ count: number }>) => {
           selectCalled++
           return {
@@ -318,6 +321,8 @@ describe('useInfiniteQuery', () => {
             pageParams: data.pageParams,
           }
         }, []),
+        getNextPageParam: () => undefined,
+        defaultPageParam: 0,
       })
       states.push(state)
 
@@ -350,31 +355,29 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to reverse the data', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
-      const state = useInfiniteQuery(
-        key,
-        async ({ pageParam = 0 }) => {
+      const state = useInfiniteQuery({
+        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,
+      })
 
       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>
@@ -409,21 +412,21 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to fetch a previous page', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const start = 10
-      const state = useInfiniteQuery(
-        key,
-        async ({ pageParam = start }) => {
+      const state = useInfiniteQuery({
+        queryKey: key,
+        queryFn: async ({ pageParam }) => {
           await sleep(10)
           return Number(pageParam)
         },
-        {
-          getPreviousPageParam: (firstPage) => firstPage - 1,
-          notifyOnChangeProps: 'all',
-        },
-      )
+        defaultPageParam: start,
+        getNextPageParam: (lastPage) => lastPage + 1,
+        getPreviousPageParam: (firstPage) => firstPage - 1,
+        notifyOnChangeProps: 'all',
+      })
 
       states.push(state)
 
@@ -454,8 +457,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,
@@ -463,7 +466,7 @@ describe('useInfiniteQuery', () => {
     })
     expect(states[1]).toMatchObject({
       data: { pages: [10] },
-      hasNextPage: undefined,
+      hasNextPage: true,
       hasPreviousPage: true,
       isFetching: false,
       isFetchingNextPage: false,
@@ -472,7 +475,7 @@ describe('useInfiniteQuery', () => {
     })
     expect(states[2]).toMatchObject({
       data: { pages: [10] },
-      hasNextPage: undefined,
+      hasNextPage: true,
       hasPreviousPage: true,
       isFetching: true,
       isFetchingNextPage: false,
@@ -481,7 +484,7 @@ describe('useInfiniteQuery', () => {
     })
     expect(states[3]).toMatchObject({
       data: { pages: [9, 10] },
-      hasNextPage: undefined,
+      hasNextPage: true,
       hasPreviousPage: true,
       isFetching: false,
       isFetchingNextPage: false,
@@ -490,127 +493,22 @@ describe('useInfiniteQuery', () => {
     })
   })
 
-  it('should be able to refetch when providing page params manually', async () => {
-    const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
-
-    function Page() {
-      const state = useInfiniteQuery(key, async ({ pageParam = 10 }) => {
-        await sleep(10)
-        return Number(pageParam)
-      })
-
-      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>
-      )
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => rendered.getByText('data: 10'))
-    fireEvent.click(rendered.getByRole('button', { name: /fetchNextPage/i }))
-
-    await waitFor(() => rendered.getByText('data: 10,11'))
-    fireEvent.click(
-      rendered.getByRole('button', { name: /fetchPreviousPage/i }),
-    )
-    await waitFor(() => rendered.getByText('data: 9,10,11'))
-    fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))
-
-    await waitFor(() => rendered.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: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
-      const state = useInfiniteQuery(
-        key,
-        async ({ pageParam = 10 }) => {
+      const state = useInfiniteQuery({
+        queryKey: key,
+        queryFn: async ({ pageParam }) => {
           await sleep(10)
           return Number(pageParam)
         },
-        {
-          getPreviousPageParam: (firstPage) => firstPage - 1,
-          getNextPageParam: (lastPage) => lastPage + 1,
-          notifyOnChangeProps: 'all',
-        },
-      )
+        defaultPageParam: 10,
+        getPreviousPageParam: (firstPage) => firstPage - 1,
+        getNextPageParam: (lastPage) => lastPage + 1,
+        notifyOnChangeProps: 'all',
+      })
 
       states.push(state)
 
@@ -704,112 +602,22 @@ describe('useInfiniteQuery', () => {
     })
   })
 
-  it('should be able to refetch only specific pages when refetchPages is provided', async () => {
-    const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
-
-    function Page() {
-      const multiplier = React.useRef(1)
-      const state = useInfiniteQuery(
-        key,
-        async ({ pageParam = 10 }) => {
-          await sleep(10)
-          return Number(pageParam) * multiplier.current
-        },
-        {
-          getNextPageParam: (lastPage) => lastPage + 1,
-          notifyOnChangeProps: 'all',
-        },
-      )
-
-      states.push(state)
-
-      return (
-        <div>
-          <button onClick={() => state.fetchNextPage()}>fetchNextPage</button>
-          <button
-            onClick={() => {
-              multiplier.current = 2
-              state.refetch({
-                refetchPage: (_, index) => index === 0,
-              })
-            }}
-          >
-            refetchPage
-          </button>
-          <div>data: {state.data?.pages.join(',') ?? 'null'}</div>
-          <div>isFetching: {String(state.isFetching)}</div>
-        </div>
-      )
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => rendered.getByText('data: 10'))
-    fireEvent.click(rendered.getByRole('button', { name: /fetchNextPage/i }))
-
-    await waitFor(() => rendered.getByText('data: 10,11'))
-    fireEvent.click(rendered.getByRole('button', { name: /refetchPage/i }))
-
-    await waitFor(() => rendered.getByText('data: 20,11'))
-    await waitFor(() => rendered.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: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const start = 10
-      const state = useInfiniteQuery(
-        key,
-        async ({ pageParam = start }) => {
+      const state = useInfiniteQuery({
+        queryKey: key,
+        queryFn: async ({ pageParam }) => {
           await sleep(50)
           return Number(pageParam)
         },
-        {
-          getNextPageParam: (lastPage) => lastPage + 1,
-          notifyOnChangeProps: 'all',
-        },
-      )
+        defaultPageParam: start,
+        getNextPageParam: (lastPage) => lastPage + 1,
+        notifyOnChangeProps: 'all',
+      })
 
       states.push(state)
 
@@ -833,7 +641,7 @@ describe('useInfiniteQuery', () => {
 
     expect(states.length).toBe(5)
     expect(states[0]).toMatchObject({
-      hasNextPage: undefined,
+      hasNextPage: false,
       data: undefined,
       isFetching: true,
       isFetchingNextPage: false,
@@ -877,21 +685,22 @@ describe('useInfiniteQuery', () => {
     const fetchPage = jest.fn<
       Promise<number>,
       [QueryFunctionContext<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)
-      }
+    >(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 { fetchNextPage } = useInfiniteQuery(key, fetchPage, {
+      const { fetchNextPage } = useInfiniteQuery({
+        queryKey: key,
+        queryFn: fetchPage,
+        defaultPageParam: start,
         getNextPageParam: (lastPage) => lastPage + 1,
       })
 
@@ -918,10 +727,10 @@ describe('useInfiniteQuery', () => {
 
     let callIndex = 0
     const firstCtx = fetchPage.mock.calls[callIndex]![0]
-    expect(firstCtx.pageParam).toBeUndefined()
+    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()
 
@@ -930,7 +739,7 @@ describe('useInfiniteQuery', () => {
     expect(secondCtx.pageParam).toBe(11)
     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)
 
@@ -939,7 +748,7 @@ describe('useInfiniteQuery', () => {
     expect(thirdCtx.pageParam).toBe(11)
     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()
   })
@@ -952,21 +761,23 @@ describe('useInfiniteQuery', () => {
     const fetchPage = jest.fn<
       Promise<number>,
       [QueryFunctionContext<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)
-      }
+    >(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 { fetchNextPage } = useInfiniteQuery(key, fetchPage, {
+      const { fetchNextPage } = useInfiniteQuery({
+        queryKey: key,
+        queryFn: fetchPage,
+        defaultPageParam: start,
         getNextPageParam: (lastPage) => lastPage + 1,
       })
 
@@ -993,10 +804,10 @@ describe('useInfiniteQuery', () => {
 
     let callIndex = 0
     const firstCtx = fetchPage.mock.calls[callIndex]![0]
-    expect(firstCtx.pageParam).toBeUndefined()
+    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()
 
@@ -1005,28 +816,27 @@ describe('useInfiniteQuery', () => {
     expect(secondCtx.pageParam).toBe(11)
     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: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const start = 10
-      const state = useInfiniteQuery(
-        key,
-        async ({ pageParam = start }) => {
+      const state = useInfiniteQuery({
+        queryKey: key,
+        queryFn: async ({ pageParam }) => {
           await sleep(50)
           return Number(pageParam)
         },
-        {
-          getNextPageParam: (lastPage) => lastPage + 1,
-          notifyOnChangeProps: 'all',
-        },
-      )
+        defaultPageParam: start,
+        getNextPageParam: (lastPage) => lastPage + 1,
+        notifyOnChangeProps: 'all',
+      })
 
       states.push(state)
 
@@ -1047,7 +857,7 @@ describe('useInfiniteQuery', () => {
 
     expect(states.length).toBe(2)
     expect(states[0]).toMatchObject({
-      hasNextPage: undefined,
+      hasNextPage: false,
       data: undefined,
       isFetching: true,
       isFetchingNextPage: false,
@@ -1069,20 +879,19 @@ describe('useInfiniteQuery', () => {
     const initialData = { pages: [1, 2, 3, 4], pageParams: [0, 1, 2, 3] }
 
     function List() {
-      useInfiniteQuery(
-        key,
-        async ({ pageParam = 0, signal: _ }) => {
+      useInfiniteQuery({
+        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,
+        defaultPageParam: 0,
+        getNextPageParam: (_, allPages) => {
+          return allPages.length === 4 ? undefined : allPages.length
         },
-      )
+      })
 
       return null
     }
@@ -1111,100 +920,23 @@ describe('useInfiniteQuery', () => {
     })
   })
 
-  it('should be able to override the cursor in the fetchNextPage callback', async () => {
-    const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
-
-    function Page() {
-      const state = useInfiniteQuery(
-        key,
-        async ({ pageParam = 0 }) => {
-          await sleep(10)
-          return Number(pageParam)
-        },
-        {
-          getNextPageParam: (lastPage) => lastPage + 1,
-          notifyOnChangeProps: 'all',
-        },
-      )
-
-      states.push(state)
-
-      return (
-        <div>
-          <div>page0: {state.data?.pages[0]}</div>
-          <div>page1: {state.data?.pages[1]}</div>
-          <button onClick={() => state.fetchNextPage({ pageParam: 5 })}>
-            Fetch next page
-          </button>
-        </div>
-      )
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => {
-      rendered.getByText('page0: 0')
-    })
-
-    fireEvent.click(rendered.getByRole('button', { name: 'Fetch next page' }))
-
-    await waitFor(() => {
-      rendered.getByText('page1: 5')
-    })
-
-    // make sure no additional renders are happening after fetching next page
-    await sleep(20)
-
-    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: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const [firstPage, setFirstPage] = React.useState(0)
 
-      const state = useInfiniteQuery(
-        key,
-        async ({ pageParam = firstPage }) => {
+      const state = useInfiniteQuery({
+        queryKey: key,
+        queryFn: async ({ pageParam }) => {
           await sleep(10)
           return Number(pageParam)
         },
-        {
-          getNextPageParam: (lastPage) => lastPage + 1,
-          notifyOnChangeProps: 'all',
-        },
-      )
+        getNextPageParam: (lastPage) => lastPage + 1,
+        defaultPageParam: firstPage,
+        notifyOnChangeProps: 'all',
+      })
 
       states.push(state)
 
@@ -1230,7 +962,7 @@ describe('useInfiniteQuery', () => {
 
     expect(states.length).toBe(5)
     expect(states[0]).toMatchObject({
-      hasNextPage: undefined,
+      hasNextPage: false,
       data: undefined,
       isFetching: true,
       isFetchingNextPage: false,
@@ -1272,21 +1004,20 @@ describe('useInfiniteQuery', () => {
 
   it('should only refetch the first page when initialData is provided', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
-      const state = useInfiniteQuery(
-        key,
-        async ({ pageParam }): Promise<number> => {
+      const state = useInfiniteQuery({
+        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',
+      })
 
       states.push(state)
 
@@ -1338,16 +1069,15 @@ describe('useInfiniteQuery', () => {
 
   it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
-      const state = useInfiniteQuery(
-        key,
-        ({ pageParam = 1 }) => Number(pageParam),
-        {
-          getNextPageParam: () => undefined,
-        },
-      )
+      const state = useInfiniteQuery({
+        queryKey: key,
+        queryFn: ({ pageParam }) => Number(pageParam),
+        getNextPageParam: () => undefined,
+        defaultPageParam: 1,
+      })
 
       states.push(state)
 
@@ -1361,7 +1091,7 @@ describe('useInfiniteQuery', () => {
     expect(states.length).toBe(2)
     expect(states[0]).toMatchObject({
       data: undefined,
-      hasNextPage: undefined,
+      hasNextPage: false,
       isFetching: true,
       isFetchingNextPage: false,
       isSuccess: false,
@@ -1377,17 +1107,16 @@ describe('useInfiniteQuery', () => {
 
   it('should compute hasNextPage correctly using initialData', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
-      const state = useInfiniteQuery(
-        key,
-        ({ pageParam = 10 }): number => pageParam,
-        {
-          initialData: { pages: [10], pageParams: [undefined] },
-          getNextPageParam: (lastPage) => (lastPage === 10 ? 11 : undefined),
-        },
-      )
+      const state = useInfiniteQuery({
+        queryKey: key,
+        queryFn: ({ pageParam }): number => pageParam,
+        initialData: { pages: [10], pageParams: [10] },
+        getNextPageParam: (lastPage) => (lastPage === 10 ? 11 : undefined),
+        defaultPageParam: 10,
+      })
 
       states.push(state)
 
@@ -1417,17 +1146,16 @@ describe('useInfiniteQuery', () => {
 
   it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<number>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
-      const state = useInfiniteQuery(
-        key,
-        ({ pageParam = 10 }): number => pageParam,
-        {
-          initialData: { pages: [10], pageParams: [undefined] },
-          getNextPageParam: () => undefined,
-        },
-      )
+      const state = useInfiniteQuery({
+        queryKey: key,
+        queryFn: ({ pageParam }): number => pageParam,
+        defaultPageParam: 10,
+        initialData: { pages: [10], pageParams: [10] },
+        getNextPageParam: () => undefined,
+      })
 
       states.push(state)
 
@@ -1457,20 +1185,19 @@ describe('useInfiniteQuery', () => {
 
   it('should not use selected data when computing hasNextPage', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<string>[] = []
+    const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []
 
     function Page() {
-      const state = useInfiniteQuery(
-        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 = useInfiniteQuery({
+        queryKey: key,
+        queryFn: ({ pageParam }) => Number(pageParam),
+        getNextPageParam: (lastPage) => (lastPage === 1 ? 2 : undefined),
+        select: (data) => ({
+          pages: data.pages.map((x) => x.toString()),
+          pageParams: data.pageParams,
+        }),
+        defaultPageParam: 1,
+      })
 
       states.push(state)
 
@@ -1484,7 +1211,7 @@ describe('useInfiniteQuery', () => {
     expect(states.length).toBe(2)
     expect(states[0]).toMatchObject({
       data: undefined,
-      hasNextPage: undefined,
+      hasNextPage: false,
       isFetching: true,
       isFetchingNextPage: false,
       isSuccess: false,
@@ -1525,19 +1252,18 @@ describe('useInfiniteQuery', () => {
         fetchNextPage,
         hasNextPage,
         refetch,
-      } = useInfiniteQuery<Result, Error>(
-        key,
-        ({ pageParam = 0 }) =>
+      } = useInfiniteQuery({
+        queryKey: key,
+        queryFn: ({ pageParam }) =>
           fetchItemsWithLimit(pageParam, fetchCountRef.current++),
-        {
-          getNextPageParam: (lastPage) => lastPage.nextId,
-        },
-      )
+        defaultPageParam: 0,
+        getNextPageParam: (lastPage) => lastPage.nextId,
+      })
 
       return (
         <div>
           <h1>Pagination</h1>
-          {status === 'loading' ? (
+          {status === 'pending' ? (
             'Loading...'
           ) : status === 'error' ? (
             <span>Error: {error.message}</span>
@@ -1559,7 +1285,7 @@ describe('useInfiniteQuery', () => {
               <div>
                 <button
                   onClick={() => fetchNextPage()}
-                  disabled={!hasNextPage || Boolean(isFetchingNextPage)}
+                  disabled={!hasNextPage || isFetchingNextPage}
                 >
                   {isFetchingNextPage
                     ? 'Loading more...'
@@ -1574,7 +1300,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
@@ -1651,23 +1377,22 @@ describe('useInfiniteQuery', () => {
         fetchNextPage,
         hasNextPage,
         refetch,
-      } = useInfiniteQuery<Result, Error>(
-        key,
-        ({ pageParam = 0 }) =>
+      } = useInfiniteQuery({
+        queryKey: key,
+        queryFn: ({ pageParam }) =>
           fetchItems(
             pageParam,
             fetchCountRef.current++,
             pageParam === MAX || (pageParam === MAX - 1 && isRemovedLastPage),
           ),
-        {
-          getNextPageParam: (lastPage) => lastPage.nextId,
-        },
-      )
+        getNextPageParam: (lastPage) => lastPage.nextId,
+        defaultPageParam: 0,
+      })
 
       return (
         <div>
           <h1>Pagination</h1>
-          {status === 'loading' ? (
+          {status === 'pending' ? (
             'Loading...'
           ) : status === 'error' ? (
             <span>Error: {error.message}</span>
@@ -1689,7 +1414,7 @@ describe('useInfiniteQuery', () => {
               <div>
                 <button
                   onClick={() => fetchNextPage()}
-                  disabled={!hasNextPage || Boolean(isFetchingNextPage)}
+                  disabled={!hasNextPage || isFetchingNextPage}
                 >
                   {isFetchingNextPage
                     ? 'Loading more...'
@@ -1779,7 +1504,12 @@ describe('useInfiniteQuery', () => {
     }
 
     function Inner() {
-      const state = useInfiniteQuery(key, queryFn)
+      const state = useInfiniteQuery({
+        queryKey: key,
+        queryFn,
+        getNextPageParam: () => undefined,
+        defaultPageParam: 0,
+      })
       return (
         <div>
           <h1>Status: {state.status}</h1>
@@ -1809,4 +1539,29 @@ describe('useInfiniteQuery', () => {
 
     expect(cancelFn).toHaveBeenCalled()
   })
+
+  it('should use provided custom queryClient', async () => {
+    const key = queryKey()
+    const queryFn = async () => {
+      return Promise.resolve('custom client')
+    }
+
+    function Page() {
+      const { data } = useInfiniteQuery(
+        {
+          queryKey: key,
+          queryFn,
+          getNextPageParam: () => undefined,
+          defaultPageParam: 0,
+        },
+        queryClient,
+      )
+
+      return <div>data: {data?.pages[0]}</div>
+    }
+
+    const rendered = render(<Page></Page>)
+
+    await waitFor(() => rendered.getByText('data: custom client'))
+  })
 })