fix: retry for infinite queries

The retryer lives above the fetchFn, and it re-runs the fetchFn whenever a retry happens. Usually, the fetchFn is a thin wrapper around the actual queryFn passed by the user. However, for infinite queries, it fetches all pages in a loop.
The retryer breaks out of this loop if an error occurs on e.g. the second page, and then retries by running the fetchFn - which will re-set the loop

This fix hoists the currentPage counter out of the fetchFn - into the closure created by onFetch. The outer closure is created from running `query.fetch` once, so it won't be re-set between retries.
The fix also re-writes the fetch loop to always take the `currentPage` into account, where it was previously treating the first page differently

Author: TkDodo

packages/query-core/src/__tests__/infiniteQueryBehavior.test.tsx

@@ -329,8 +329,7 @@ describe('InfiniteQueryBehavior', () => {
     unsubscribe()
   })
 
-  // Ensures https://github.com/TanStack/query/issues/8046 is resolved
-  test('InfiniteQueryBehavior should not enter an infinite loop when a page errors while retry is on', async () => {
+  test('InfiniteQueryBehavior should not enter an infinite loop when a page errors while retry is on #8046', async () => {
     let errorCount = 0
     const key = queryKey()
 
@@ -348,17 +347,14 @@ describe('InfiniteQueryBehavior', () => {
 
     const fetchData = async ({ nextToken = 0 }: { nextToken?: number }) =>
       new Promise<TestResponse>((resolve, reject) => {
-        console.log(`getting page ${nextToken}...`)
         setTimeout(() => {
           if (nextToken == 2 && errorCount < 3) {
             errorCount += 1
-            console.error('rate limited!')
             reject({ statusCode: 429 })
             return
           }
           resolve(fakeData[nextToken] as TestResponse)
-          console.log(`got page ${nextToken}`)
-        }, 500)
+        }, 10)
       })
 
     const observer = new InfiniteQueryObserver<
@@ -395,13 +391,9 @@ describe('InfiniteQueryBehavior', () => {
     // infinite loop where the retryer every time restarts from page 1
     // once it reaches the page where it errors.
     // For this to work, we'd need to reset the error count so we actually retry
-    console.log('###################################################')
     errorCount = 0
     const reFetchedData = await observer.refetch()
 
-    // Before resolution (while the bug persists), this will never be reached
-    // and the test will timeout.
     expect(reFetchedData.data?.pageParams).toEqual([1, 2, 3])
-    console.log(reFetchedData.data?.pageParams)
   })
 })

packages/query-core/src/infiniteQueryBehavior.ts

@@ -13,14 +13,15 @@ export function infiniteQueryBehavior<TQueryFnData, TError, TData, TPageParam>(
 ): QueryBehavior<TQueryFnData, TError, InfiniteData<TData, TPageParam>> {
   return {
     onFetch: (context, query) => {
+      const options = context.options as InfiniteQueryPageParamsOptions<TData>
+      const direction = context.fetchOptions?.meta?.fetchMore?.direction
+      const oldPages = context.state.data?.pages || []
+      const oldPageParams = context.state.data?.pageParams || []
+      let result: InfiniteData<unknown> = { pages: [], pageParams: [] }
+      let currentPage = 0
+
       const fetchFn = async () => {
-        const options = context.options as InfiniteQueryPageParamsOptions<TData>
-        const direction = context.fetchOptions?.meta?.fetchMore?.direction
-        const oldPages = context.state.data?.pages || []
-        const oldPageParams = context.state.data?.pageParams || []
-        const empty = { pages: [], pageParams: [] }
         let cancelled = false
-
         const addSignalProperty = (object: unknown) => {
           Object.defineProperty(object, 'signal', {
             enumerable: true,
@@ -78,8 +79,6 @@ export function infiniteQueryBehavior<TQueryFnData, TError, TData, TPageParam>(
           }
         }
 
-        let result: InfiniteData<unknown>
-
         // fetch next / previous page?
         if (direction && oldPages.length) {
           const previous = direction === 'backward'
@@ -92,22 +91,20 @@ export function infiniteQueryBehavior<TQueryFnData, TError, TData, TPageParam>(
 
           result = await fetchPage(oldData, param, previous)
         } else {
-          // Fetch first page
-          result = await fetchPage(
-            empty,
-            oldPageParams[0] ?? options.initialPageParam,
-          )
-
           const remainingPages = pages ?? oldPages.length
 
-          // Fetch remaining pages
-          for (let i = 1; i < remainingPages; i++) {
-            const param = getNextPageParam(options, result)
+          // Fetch all pages
+          do {
+            const param =
+              currentPage === 0
+                ? (oldPageParams[0] ?? options.initialPageParam)
+                : getNextPageParam(options, result)
             if (param == null) {
               break
             }
             result = await fetchPage(result, param)
-          }
+            currentPage++
+          } while (currentPage < remainingPages)
         }
 
         return result