@tanstack/query-core 4.24.6 → 4.24.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-core",
-  "version": "4.24.6",
+  "version": "4.24.10",
   "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/mutationCache.ts

@@ -1,5 +1,5 @@
 import type { MutationObserver } from './mutationObserver'
-import type { MutationOptions } from './types'
+import type { MutationOptions, NotifyEvent } from './types'
 import type { QueryClient } from './queryClient'
 import { notifyManager } from './notifyManager'
 import type { Action, MutationState } from './mutation'
@@ -29,34 +29,34 @@ interface MutationCacheConfig {
   ) => Promise<unknown> | unknown
 }
 
-interface NotifyEventMutationAdded {
+interface NotifyEventMutationAdded extends NotifyEvent {
   type: 'added'
   mutation: Mutation<any, any, any, any>
 }
-interface NotifyEventMutationRemoved {
+interface NotifyEventMutationRemoved extends NotifyEvent {
   type: 'removed'
   mutation: Mutation<any, any, any, any>
 }
 
-interface NotifyEventMutationObserverAdded {
+interface NotifyEventMutationObserverAdded extends NotifyEvent {
   type: 'observerAdded'
   mutation: Mutation<any, any, any, any>
   observer: MutationObserver<any, any, any>
 }
 
-interface NotifyEventMutationObserverRemoved {
+interface NotifyEventMutationObserverRemoved extends NotifyEvent {
   type: 'observerRemoved'
   mutation: Mutation<any, any, any, any>
   observer: MutationObserver<any, any, any>
 }
 
-interface NotifyEventMutationObserverOptionsUpdated {
+interface NotifyEventMutationObserverOptionsUpdated extends NotifyEvent {
   type: 'observerOptionsUpdated'
   mutation?: Mutation<any, any, any, any>
   observer: MutationObserver<any, any, any, any>
 }
 
-interface NotifyEventMutationUpdated {
+interface NotifyEventMutationUpdated extends NotifyEvent {
   type: 'updated'
   mutation: Mutation<any, any, any, any>
   action: Action<any, any, any, any>

package/src/queryCache.ts

@@ -2,7 +2,7 @@ import type { QueryFilters } from './utils'
 import { hashQueryKeyByOptions, matchQuery, parseFilterArgs } from './utils'
 import type { Action, QueryState } from './query'
 import { Query } from './query'
-import type { QueryKey, QueryOptions } from './types'
+import type { NotifyEvent, QueryKey, QueryOptions } from './types'
 import { notifyManager } from './notifyManager'
 import type { QueryClient } from './queryClient'
 import { Subscribable } from './subscribable'
@@ -19,40 +19,40 @@ interface QueryHashMap {
   [hash: string]: Query<any, any, any, any>
 }
 
-interface NotifyEventQueryAdded {
+interface NotifyEventQueryAdded extends NotifyEvent {
   type: 'added'
   query: Query<any, any, any, any>
 }
 
-interface NotifyEventQueryRemoved {
+interface NotifyEventQueryRemoved extends NotifyEvent {
   type: 'removed'
   query: Query<any, any, any, any>
 }
 
-interface NotifyEventQueryUpdated {
+interface NotifyEventQueryUpdated extends NotifyEvent {
   type: 'updated'
   query: Query<any, any, any, any>
   action: Action<any, any>
 }
 
-interface NotifyEventQueryObserverAdded {
+interface NotifyEventQueryObserverAdded extends NotifyEvent {
   type: 'observerAdded'
   query: Query<any, any, any, any>
   observer: QueryObserver<any, any, any, any, any>
 }
 
-interface NotifyEventQueryObserverRemoved {
+interface NotifyEventQueryObserverRemoved extends NotifyEvent {
   type: 'observerRemoved'
   query: Query<any, any, any, any>
   observer: QueryObserver<any, any, any, any, any>
 }
 
-interface NotifyEventQueryObserverResultsUpdated {
+interface NotifyEventQueryObserverResultsUpdated extends NotifyEvent {
   type: 'observerResultsUpdated'
   query: Query<any, any, any, any>
 }
 
-interface NotifyEventQueryObserverOptionsUpdated {
+interface NotifyEventQueryObserverOptionsUpdated extends NotifyEvent {
   type: 'observerOptionsUpdated'
   query: Query<any, any, any, any>
   observer: QueryObserver<any, any, any, any, any>

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

package/src/types.ts

@@ -726,3 +726,16 @@ export interface CancelOptions {
 export interface SetDataOptions {
   updatedAt?: number
 }
+
+export type NotifyEventType =
+  | 'added'
+  | 'removed'
+  | 'updated'
+  | 'observerAdded'
+  | 'observerRemoved'
+  | 'observerResultsUpdated'
+  | 'observerOptionsUpdated'
+
+export interface NotifyEvent {
+  type: NotifyEventType
+}