Set fetchStatus to idle when dehydrating (#4974)

* 🐛 Set fetchStatus to idle when dehydrating * ✅ Add a test case for ensuring fetchStatus is idle * ✅ Update tests * 🚨 Fix lint warnings * ✅ Update fetchStatus when hydrating * :okay_hand: Review updates --------- Co-authored-by: Dominik Dorfmeister <[email protected]>
TanStack · Feb 18, 2023 · 8e7a316 · 8e7a316
1 parent f14590b
commit 8e7a316
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 3 deletions.
diff --git a/packages/query-core/src/hydration.ts b/packages/query-core/src/hydration.ts
@@ -142,10 +142,17 @@ 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,
+    }
+
     // Do not hydrate if an existing query exists with newer data
     if (query) {
-      if (query.state.dataUpdatedAt < dehydratedQuery.state.dataUpdatedAt) {
-        query.setState(dehydratedQuery.state)
+      if (query.state.dataUpdatedAt < dehydratedQueryState.dataUpdatedAt) {
+        query.setState(dehydratedQueryState)
       }
       return
     }
@@ -158,7 +165,7 @@ export function hydrate(
         queryKey: dehydratedQuery.queryKey,
         queryHash: dehydratedQuery.queryHash,
       },
-      dehydratedQuery.state,
+      dehydratedQueryState,
     )
   })
 }
diff --git a/packages/query-core/src/tests/hydration.test.tsx b/packages/query-core/src/tests/hydration.test.tsx
@@ -426,4 +426,44 @@ describe('dehydration and rehydration', () => {
 
     queryClient.clear()
   })
+
+  test('should set the fetchStatus to idle in all cases when dehydrating', async () => {
+    const queryCache = new QueryCache()
+    const queryClient = createQueryClient({ queryCache })
+
+    let isInitialFetch = true
+    let resolvePromise: (value: unknown) => void = () => undefined
+
+    const customFetchData = () => {
+      const promise = new Promise((resolve) => {
+        resolvePromise = resolve
+      })
+      // Resolve the promise in initial fetch
+      // because we are awaiting the query first time
+      if (isInitialFetch) {
+        resolvePromise('string')
+      }
+      isInitialFetch = false
+      return promise
+    }
+
+    await queryClient.prefetchQuery(['string'], () => customFetchData())
+
+    queryClient.refetchQueries(['string'])
+
+    const dehydrated = dehydrate(queryClient)
+    resolvePromise('string')
+    expect(
+      dehydrated.queries.find((q) => q.queryHash === '["string"]')?.state
+        .fetchStatus,
+    ).toBe('fetching')
+    const stringified = JSON.stringify(dehydrated)
+
+    // ---
+    const parsed = JSON.parse(stringified)
+    const hydrationCache = new QueryCache()
+    const hydrationClient = createQueryClient({ queryCache: hydrationCache })
+    hydrate(hydrationClient, parsed)
+    expect(hydrationCache.find(['string'])?.state.fetchStatus).toBe('idle')
+  })
 })