fix(query-core): remove focus check from retryer for refetchIntervallnBackground

Author: Hellol77

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

@@ -58,7 +58,7 @@ describe('query', () => {
     expect(query.gcTime).toBe(200)
   })
 
-  it('should continue retry after focus regain and resolve all promises', async () => {
+  it('should continue retry and resolve even with focus state changes', async () => {
     const key = queryKey()
 
     // make page unfocused
@@ -86,23 +86,16 @@ describe('query', () => {
       result = data
     })
 
-    // Check if we do not have a result
+    // Check if we do not have a result initially
     expect(result).toBeUndefined()
 
-    // Check if the query is really paused
-    await vi.advanceTimersByTimeAsync(50)
-    expect(result).toBeUndefined()
+    // With new behavior, retries continue in background
+    // Wait for retries to complete
+    await vi.advanceTimersByTimeAsync(10)
+    expect(result).toBe('data3')
+    expect(count).toBe(3)
 
-    // Reset visibilityState to original value
     visibilityMock.mockRestore()
-    window.dispatchEvent(new Event('visibilitychange'))
-
-    // There should not be a result yet
-    expect(result).toBeUndefined()
-
-    // By now we should have a value
-    await vi.advanceTimersByTimeAsync(50)
-    expect(result).toBe('data3')
   })
 
   it('should continue retry after reconnect and resolve all promises', async () => {
@@ -153,11 +146,39 @@ describe('query', () => {
     onlineMock.mockRestore()
   })
 
-  it('should throw a CancelledError when a paused query is cancelled', async () => {
+  it('should continue retry in background when page is not focused', async () => {
     const key = queryKey()
-
     // make page unfocused
     const visibilityMock = mockVisibilityState('hidden')
+    let count = 0
+    let result
+    const promise = queryClient.fetchQuery({
+      queryKey: key,
+      queryFn: () => {
+        count++
+        if (count === 3) {
+          return `data${count}`
+        }
+        throw new Error(`error${count}`)
+      },
+      retry: 3,
+      retryDelay: 1,
+    })
+    promise.then((data) => {
+      result = data
+    })
+    // Check if we do not have a result initially
+    expect(result).toBeUndefined()
+    // Unlike the old behavior, retry should continue in background
+    // Wait for retries to complete
+    await vi.advanceTimersByTimeAsync(10)
+    expect(result).toBe('data3')
+    expect(count).toBe(3)
+    visibilityMock.mockRestore()
+  })
+
+  it('should throw a CancelledError when a retrying query is cancelled', async () => {
+    const key = queryKey()
 
     let count = 0
     let result: unknown
@@ -169,7 +190,7 @@ describe('query', () => {
         throw new Error(`error${count}`)
       },
       retry: 3,
-      retryDelay: 1,
+      retryDelay: 100, // Longer delay to allow cancellation
     })
 
     promise.catch((data) => {
@@ -178,22 +199,20 @@ describe('query', () => {
 
     const query = queryCache.find({ queryKey: key })!
 
-    // Check if the query is really paused
-    await vi.advanceTimersByTimeAsync(50)
+    // Wait briefly for first failure and start of retry
+    await vi.advanceTimersByTimeAsync(1)
     expect(result).toBeUndefined()
 
-    // Cancel query
+    // Cancel query during retry
     query.cancel()
 
     // Check if the error is set to the cancelled error
     try {
       await promise
       expect.unreachable()
     } catch {
-      expect(result).toBeInstanceOf(CancelledError)
-    } finally {
-      // Reset visibilityState to original value
-      visibilityMock.mockRestore()
+      expect(result instanceof CancelledError).toBe(true)
+      expect(result instanceof Error).toBe(true)
     }
   })
 
@@ -236,6 +255,43 @@ describe('query', () => {
     expect(queryCache.find({ queryKey: key })?.state.data).toBe('data')
   })
 
+  it('should continue refetchInterval with retries in background when tab is inactive', async () => {
+    const key = queryKey()
+    const visibilityMock = mockVisibilityState('hidden')
+
+    let totalRequests = 0
+
+    const queryObserver = new QueryObserver(queryClient, {
+      queryKey: key,
+      queryFn: () => {
+        totalRequests++
+        // Always fail to simulate network offline
+        throw new Error(`Network error ${totalRequests}`)
+      },
+      refetchInterval: 60000,
+      refetchIntervalInBackground: true,
+      retry: 3,
+      retryDelay: 1,
+    })
+
+    queryObserver.subscribe(() => {})
+
+    // First interval: t=0 to t=60s (initial query + retries)
+    await vi.advanceTimersByTimeAsync(60000)
+    expect(totalRequests).toBe(4)
+
+    // Second interval: t=60s to t=120s (refetch + retries)
+    await vi.advanceTimersByTimeAsync(60000)
+    expect(totalRequests).toBe(8)
+
+    // Third interval: t=120s to t=180s (refetch + retries)
+    await vi.advanceTimersByTimeAsync(60000)
+    expect(totalRequests).toBe(12)
+
+    queryObserver.destroy()
+    visibilityMock.mockRestore()
+  })
+
   test('should provide context to queryFn', () => {
     const key = queryKey()
 

packages/query-core/src/retryer.ts

@@ -1,4 +1,3 @@
-import { focusManager } from './focusManager'
 import { onlineManager } from './onlineManager'
 import { pendingThenable } from './thenable'
 import { isServer, sleep } from './utils'
@@ -96,7 +95,6 @@ export function createRetryer<TData = unknown, TError = DefaultError>(
   }
 
   const canContinue = () =>
-    focusManager.isFocused() &&
     (config.networkMode === 'always' || onlineManager.isOnline()) &&
     config.canRun()
 

packages/react-query/src/__tests__/useQuery.test.tsx

@@ -3431,7 +3431,7 @@ describe('useQuery', () => {
   })
 
   // See https://github.com/tannerlinsley/react-query/issues/160
-  it('should continue retry after focus regain', async () => {
+  it('should continue retry in background even when page is not focused', async () => {
     const key = queryKey()
 
     // make page unfocused
@@ -3462,29 +3462,8 @@ describe('useQuery', () => {
 
     const rendered = renderWithClient(queryClient, <Page />)
 
-    // The query should display the first error result
-    await vi.advanceTimersByTimeAsync(0)
-    expect(rendered.getByText('failureCount 1')).toBeInTheDocument()
-    expect(
-      rendered.getByText('failureReason fetching error 1'),
-    ).toBeInTheDocument()
-    expect(rendered.getByText('status pending')).toBeInTheDocument()
-    expect(rendered.getByText('error null')).toBeInTheDocument()
-
-    // Check if the query really paused
-    await vi.advanceTimersByTimeAsync(0)
-    expect(rendered.getByText('failureCount 1')).toBeInTheDocument()
-    expect(
-      rendered.getByText('failureReason fetching error 1'),
-    ).toBeInTheDocument()
-
-    act(() => {
-      // reset visibilityState to original value
-      visibilityMock.mockRestore()
-      window.dispatchEvent(new Event('visibilitychange'))
-    })
-
-    // Wait for the final result
+    // With the new behavior, retries continue in background
+    // Wait for all retries to complete
     await vi.advanceTimersByTimeAsync(4)
     expect(rendered.getByText('failureCount 4')).toBeInTheDocument()
     expect(
@@ -3493,12 +3472,10 @@ describe('useQuery', () => {
     expect(rendered.getByText('status error')).toBeInTheDocument()
     expect(rendered.getByText('error fetching error 4')).toBeInTheDocument()
 
-    // Check if the query really stopped
-    await vi.advanceTimersByTimeAsync(10)
-    expect(rendered.getByText('failureCount 4')).toBeInTheDocument()
-    expect(
-      rendered.getByText('failureReason fetching error 4'),
-    ).toBeInTheDocument()
+    // Verify all retries were attempted
+    expect(count).toBe(4)
+
+    visibilityMock.mockRestore()
   })
 
   it('should fetch on mount when a query was already created with setQueryData', async () => {

packages/solid-query/src/__tests__/useQuery.test.tsx

@@ -3197,8 +3197,7 @@ describe('useQuery', () => {
     expect(queryFn).toHaveBeenCalledTimes(2)
   })
 
-  // See https://github.com/tannerlinsley/react-query/issues/160
-  it('should continue retry after focus regain', async () => {
+  it('should continue retry in background even when page is not focused', async () => {
     const key = queryKey()
 
     // make page unfocused
@@ -3233,37 +3232,8 @@ describe('useQuery', () => {
       </QueryClientProvider>
     ))
 
-    // The query should display the first error result
-    await vi.waitFor(() =>
-      expect(rendered.getByText('failureCount 1')).toBeInTheDocument(),
-    )
-    await vi.waitFor(() =>
-      expect(
-        rendered.getByText('failureReason fetching error 1'),
-      ).toBeInTheDocument(),
-    )
-    await vi.waitFor(() =>
-      expect(rendered.getByText('status pending')).toBeInTheDocument(),
-    )
-    await vi.waitFor(() =>
-      expect(rendered.getByText('error null')).toBeInTheDocument(),
-    )
-
-    // Check if the query really paused
-    await sleep(10)
-    await vi.waitFor(() =>
-      expect(rendered.getByText('failureCount 1')).toBeInTheDocument(),
-    )
-    await vi.waitFor(() =>
-      expect(
-        rendered.getByText('failureReason fetching error 1'),
-      ).toBeInTheDocument(),
-    )
-
-    visibilityMock.mockRestore()
-    window.dispatchEvent(new Event('visibilitychange'))
-
-    // Wait for the final result
+    // With the new behavior, retries continue in background
+    // Wait for all retries to complete
     await vi.waitFor(() =>
       expect(rendered.getByText('failureCount 4')).toBeInTheDocument(),
     )
@@ -3279,16 +3249,10 @@ describe('useQuery', () => {
       expect(rendered.getByText('error fetching error 4')).toBeInTheDocument(),
     )
 
-    // Check if the query really stopped
-    await sleep(10)
-    await vi.waitFor(() =>
-      expect(rendered.getByText('failureCount 4')).toBeInTheDocument(),
-    )
-    await vi.waitFor(() =>
-      expect(
-        rendered.getByText('failureReason fetching error 4'),
-      ).toBeInTheDocument(),
-    )
+    // Verify all retries were attempted
+    expect(count).toBe(4)
+
+    visibilityMock.mockRestore()
   })
 
   it('should fetch on mount when a query was already created with setQueryData', async () => {