fix(core): do not hydrate promises if existing query is already fetching

Author: Ephem

packages/query-core/src/hydration.ts

@@ -203,6 +203,7 @@ export function hydrate(
 
       let query = queryCache.get(queryHash)
       const existingQueryIsPending = query?.state.status === 'pending'
+      const existingQueryIsFetching = query?.state.fetchStatus === 'fetching'
 
       // Do not hydrate if an existing query exists with newer data
       if (query) {
@@ -249,6 +250,7 @@ export function hydrate(
       if (
         promise &&
         !existingQueryIsPending &&
+        !existingQueryIsFetching &&
         // Only hydrate if dehydration is newer than any existing data,
         // this is always true for new queries
         (dehydratedAt === undefined || dehydratedAt > query.state.dataUpdatedAt)

packages/react-query/src/HydrationBoundary.tsx

@@ -76,6 +76,7 @@ export const HydrationBoundary = ({
               existingQuery.state.dataUpdatedAt ||
             (dehydratedQuery.promise &&
               existingQuery.state.status !== 'pending' &&
+              existingQuery.state.fetchStatus !== 'fetching' &&
               dehydratedQuery.dehydratedAt !== undefined &&
               dehydratedQuery.dehydratedAt > existingQuery.state.dataUpdatedAt)
 
@@ -110,7 +111,6 @@ export const HydrationBoundary = ({
   React.useEffect(() => {
     if (hydrationQueue) {
       hydrate(client, { queries: hydrationQueue }, optionsRef.current)
-      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
       setHydrationQueue(undefined)
     }
   }, [client, hydrationQueue])

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

@@ -8,9 +8,9 @@ import {
   QueryClient,
   QueryClientProvider,
   dehydrate,
-  hydrate,
   useQuery,
 } from '..'
+import type { hydrate } from '@tanstack/query-core'
 
 describe('React hydration', () => {
   let stringifiedState: string
@@ -368,6 +368,7 @@ describe('React hydration', () => {
 
   // https://github.com/TanStack/query/issues/8677
   test('should not infinite loop when hydrating promises that resolve to errors', async () => {
+    const originalHydrate = coreModule.hydrate
     const hydrateSpy = vi.spyOn(coreModule, 'hydrate')
     let hydrationCount = 0
     hydrateSpy.mockImplementation((...args: Parameters<typeof hydrate>) => {
@@ -379,9 +380,19 @@ describe('React hydration', () => {
         // logic in HydrationBoundary is not working as expected.
         throw new Error('Too many hydrations detected')
       }
-      return hydrate(...args)
+      return originalHydrate(...args)
     })
 
+    // For the bug to trigger, there needs to already be a query in the cache,
+    // with a dataUpdatedAt earlier than the dehydratedAt of the next query
+    const clientQueryClient = new QueryClient()
+    await clientQueryClient.prefetchQuery({
+      queryKey: ['promise'],
+      queryFn: () => 'existing',
+    })
+
+    await vi.advanceTimersByTimeAsync(100)
+
     const prefetchQueryClient = new QueryClient({
       defaultOptions: {
         dehydrate: {
@@ -393,26 +404,21 @@ describe('React hydration', () => {
       queryKey: ['promise'],
       queryFn: async () => {
         await sleep(10)
-        return Promise.reject('Query failed')
+        throw new Error('Query failed')
       },
     })
 
     const dehydratedState = dehydrate(prefetchQueryClient)
 
-    // Avoid redacted error in test
-    dehydratedState.queries[0]?.promise?.catch(() => {})
-    await vi.advanceTimersByTimeAsync(10)
+    function ignore() {
+      // Ignore redacted unhandled rejection
+    }
+    process.addListener('unhandledRejection', ignore)
+
     // Mimic what React/our synchronous thenable does for already rejected promises
     // @ts-expect-error
     dehydratedState.queries[0].promise.status = 'failure'
 
-    // For the bug to trigger, there needs to already be a query in the cache
-    const queryClient = new QueryClient()
-    await queryClient.prefetchQuery({
-      queryKey: ['promise'],
-      queryFn: () => 'existing',
-    })
-
     function Page() {
       const { data } = useQuery({
         queryKey: ['promise'],
@@ -426,7 +432,7 @@ describe('React hydration', () => {
     }
 
     const rendered = render(
-      <QueryClientProvider client={queryClient}>
+      <QueryClientProvider client={clientQueryClient}>
         <HydrationBoundary state={dehydratedState}>
           <Page />
         </HydrationBoundary>
@@ -436,8 +442,10 @@ describe('React hydration', () => {
     expect(rendered.getByText('existing')).toBeInTheDocument()
     await vi.advanceTimersByTimeAsync(10)
     expect(rendered.getByText('new')).toBeInTheDocument()
+
+    process.removeListener('unhandledRejection', ignore)
     hydrateSpy.mockRestore()
     prefetchQueryClient.clear()
-    queryClient.clear()
+    clientQueryClient.clear()
   })
 })