fix(react-query): ensure we have a gcTime of at least 1 second when u…

…sing suspense (#7860) Because React continues to render components that have already thrown to error boundaries, a small gcTime would lead to infinite fetches because if the cache entry is already removed, the next render will treat the extra render as a new suspending query.
TanStack · Aug 8, 2024 · c744f99 · c744f99
1 parent 1fc6124
commit c744f99
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 23 deletions.
diff --git a/packages/react-query/src/__tests__/suspense.test.tsx b/packages/react-query/src/__tests__/suspense.test.tsx
@@ -1192,4 +1192,48 @@ describe('useSuspenseQueries', () => {
 
     await waitFor(() => rendered.getByText('data1'))
   })
+
+  it('should show error boundary even with gcTime:0 (#7853)', async () => {
+    const consoleMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+    const key = queryKey()
+    let count = 0
+
+    function Page() {
+      useSuspenseQuery({
+        queryKey: key,
+        queryFn: async () => {
+          count++
+          console.log('queryFn')
+          throw new Error('Query failed')
+        },
+        gcTime: 0,
+        retry: false,
+      })
+
+      return null
+    }
+
+    function App() {
+      return (
+        <React.Suspense fallback="loading">
+          <ErrorBoundary
+            fallbackRender={() => {
+              console.log('fallback renders')
+              return <div>There was an error!</div>
+            }}
+          >
+            <Page />
+          </ErrorBoundary>
+        </React.Suspense>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <App />)
+
+    await waitFor(() => rendered.getByText('There was an error!'))
+    expect(count).toBe(1)
+    consoleMock.mockRestore()
+  })
 })
diff --git a/packages/react-query/src/__tests__/useQuery.test.tsx b/packages/react-query/src/__tests__/useQuery.test.tsx
@@ -4198,17 +4198,15 @@ describe('useQuery', () => {
 
   it('should not interval fetch with a refetchInterval of 0', async () => {
     const key = queryKey()
-    const states: Array<UseQueryResult<number>> = []
+    const queryFn = vi.fn(() => 1)
 
     function Page() {
       const queryInfo = useQuery({
         queryKey: key,
-        queryFn: () => 1,
+        queryFn,
         refetchInterval: 0,
       })
 
-      states.push(queryInfo)
-
       return <div>count: {queryInfo.data}</div>
     }
 
@@ -4218,20 +4216,7 @@ describe('useQuery', () => {
 
     await sleep(10) // extra sleep to make sure we're not re-fetching
 
-    expect(states.length).toEqual(2)
-
-    expect(states).toMatchObject([
-      {
-        status: 'pending',
-        isFetching: true,
-        data: undefined,
-      },
-      {
-        status: 'success',
-        isFetching: false,
-        data: 1,
-      },
-    ])
+    expect(queryFn).toHaveBeenCalledTimes(1)
   })
 
   it('should accept an empty string as query key', async () => {

diff --git a/packages/react-query/src/suspense.ts b/packages/react-query/src/suspense.ts
@@ -18,7 +18,7 @@ export const defaultThrowOnError = <
   query: Query<TQueryFnData, TError, TData, TQueryKey>,
 ) => query.state.data === undefined
 
-export const ensureStaleTime = (
+export const ensureSuspenseTimers = (
   defaultedOptions: DefaultedQueryObserverOptions<any, any, any, any, any>,
 ) => {
   if (defaultedOptions.suspense) {
@@ -27,6 +27,9 @@ export const ensureStaleTime = (
     if (typeof defaultedOptions.staleTime !== 'number') {
       defaultedOptions.staleTime = 1000
     }
+    if (typeof defaultedOptions.gcTime === 'number') {
+      defaultedOptions.gcTime = Math.max(defaultedOptions.gcTime, 1000)
+    }
   }
 }
 

diff --git a/packages/react-query/src/useBaseQuery.ts b/packages/react-query/src/useBaseQuery.ts
@@ -10,7 +10,11 @@ import {
   getHasError,
   useClearResetErrorBoundary,
 } from './errorBoundaryUtils'
-import { ensureStaleTime, fetchOptimistic, shouldSuspend } from './suspense'
+import {
+  ensureSuspenseTimers,
+  fetchOptimistic,
+  shouldSuspend,
+} from './suspense'
 import type { UseBaseQueryOptions } from './types'
 import type {
   QueryClient,
@@ -58,7 +62,7 @@ export function useBaseQuery<
     ? 'isRestoring'
     : 'optimistic'
 
-  ensureStaleTime(defaultedOptions)
+  ensureSuspenseTimers(defaultedOptions)
   ensurePreventErrorBoundaryRetry(defaultedOptions, errorResetBoundary)
 
   useClearResetErrorBoundary(errorResetBoundary)

diff --git a/packages/react-query/src/useQueries.ts b/packages/react-query/src/useQueries.ts
@@ -15,7 +15,7 @@ import {
   useClearResetErrorBoundary,
 } from './errorBoundaryUtils'
 import {
-  ensureStaleTime,
+  ensureSuspenseTimers,
   fetchOptimistic,
   shouldSuspend,
   willFetch,
@@ -255,7 +255,7 @@ export function useQueries<
   )
 
   defaultedQueries.forEach((query) => {
-    ensureStaleTime(query)
+    ensureSuspenseTimers(query)
     ensurePreventErrorBoundaryRetry(query, errorResetBoundary)
   })