@tanstack/query-core 4.24.9 → 4.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-core",
-  "version": "4.24.9",
+  "version": "4.25.0",
   "description": "The framework agnostic core that powers TanStack Query",
   "author": "tannerlinsley",
   "license": "MIT",

package/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,
     )
   })
 }

package/src/index.ts

@@ -16,6 +16,7 @@ export {
   replaceEqualDeep,
   isError,
   isServer,
+  matchQuery,
   parseQueryArgs,
   parseFilterArgs,
   parseMutationFilterArgs,

package/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')
+  })
 })