fix(hydration): do not alter fetchStatus when hydrating existing queries (#6088)

TkDodo · web-flow · commit a29f1a608f62 · 2023-10-01T12:13:45.000+02:00
diff --git a/packages/query-core/src/hydration.ts b/packages/query-core/src/hydration.ts
@@ -139,19 +139,15 @@ export function hydrate(
     )
   })
 
-  queries.forEach((dehydratedQuery) => {
-    const query = queryCache.get(dehydratedQuery.queryHash)
-
-    // Reset fetch status to idle in the dehydrated state to avoid
-    // query being stuck in fetching state upon hydration
-    const dehydratedQueryState = {
-      ...dehydratedQuery.state,
-      fetchStatus: 'idle' as const,
-    }
+  queries.forEach(({ queryKey, state, queryHash }) => {
+    const query = queryCache.get(queryHash)
 
     // Do not hydrate if an existing query exists with newer data
     if (query) {
-      if (query.state.dataUpdatedAt < dehydratedQueryState.dataUpdatedAt) {
+      if (query.state.dataUpdatedAt < state.dataUpdatedAt) {
+        // omit fetchStatus from dehydrated state
+        // so that query stays in its current fetchStatus
+        const { fetchStatus: _ignored, ...dehydratedQueryState } = state
         query.setState(dehydratedQueryState)
       }
       return
@@ -162,10 +158,15 @@ export function hydrate(
       client,
       {
         ...options?.defaultOptions?.queries,
-        queryKey: dehydratedQuery.queryKey,
-        queryHash: dehydratedQuery.queryHash,
+        queryKey,
+        queryHash,
+      },
+      // Reset fetch status to idle to avoid
+      // query being stuck in fetching state upon hydration
+      {
+        ...state,
+        fetchStatus: 'idle',
       },
-      dehydratedQueryState,
     )
   })
 }
diff --git a/packages/query-core/src/tests/hydration.test.tsx b/packages/query-core/src/tests/hydration.test.tsx
@@ -427,7 +427,7 @@ describe('dehydration and rehydration', () => {
     queryClient.clear()
   })
 
-  test('should set the fetchStatus to idle in all cases when dehydrating', async () => {
+  test('should set the fetchStatus to idle when creating a query with dehydrate', async () => {
     const queryCache = new QueryCache()
     const queryClient = createQueryClient({ queryCache })
 
@@ -466,4 +466,36 @@ describe('dehydration and rehydration', () => {
     hydrate(hydrationClient, parsed)
     expect(hydrationCache.find(['string'])?.state.fetchStatus).toBe('idle')
   })
+
+  test('should not change fetchStatus when updating a query with dehydrate', async () => {
+    const queryClient = createQueryClient()
+
+    const options = {
+      queryKey: ['string'],
+      queryFn: async () => {
+        await sleep(10)
+        return 'string'
+      },
+    } as const
+
+    await queryClient.prefetchQuery(options)
+
+    const dehydrated = dehydrate(queryClient)
+    expect(
+      dehydrated.queries.find((q) => q.queryHash === '["string"]')?.state
+        .fetchStatus,
+    ).toBe('idle')
+    const stringified = JSON.stringify(dehydrated)
+
+    // ---
+    const parsed = JSON.parse(stringified)
+    const hydrationCache = new QueryCache()
+    const hydrationClient = createQueryClient({ queryCache: hydrationCache })
+
+    const promise = hydrationClient.prefetchQuery(options)
+    hydrate(hydrationClient, parsed)
+    expect(hydrationCache.find(['string'])?.state.fetchStatus).toBe('fetching')
+    await promise
+    expect(hydrationCache.find(['string'])?.state.fetchStatus).toBe('idle')
+  })
 })
