@tanstack/query-core 5.76.0 → 5.77.0

package/package.json

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

package/src/hydration.ts

@@ -1,3 +1,4 @@
+import { tryResolveSync } from './thenable'
 import type {
   DefaultError,
   MutationKey,
@@ -46,6 +47,10 @@ interface DehydratedQuery {
   state: QueryState
   promise?: Promise<unknown>
   meta?: QueryMeta
+  // This is only optional because older versions of Query might have dehydrated
+  // without it which we need to handle for backwards compatibility.
+  // This should be changed to required in the future.
+  dehydratedAt?: number
 }
 
 export interface DehydratedState {
@@ -74,6 +79,7 @@ function dehydrateQuery(
   shouldRedactErrors: (error: unknown) => boolean,
 ): DehydratedQuery {
   return {
+    dehydratedAt: Date.now(),
     state: {
       ...query.state,
       ...(query.state.data !== undefined && {
@@ -189,52 +195,73 @@ export function hydrate(
     )
   })
 
-  queries.forEach(({ queryKey, state, queryHash, meta, promise }) => {
-    let query = queryCache.get(queryHash)
-
-    const data =
-      state.data === undefined ? state.data : deserializeData(state.data)
-
-    // Do not hydrate if an existing query exists with newer data
-    if (query) {
-      if (query.state.dataUpdatedAt < state.dataUpdatedAt) {
-        // omit fetchStatus from dehydrated state
-        // so that query stays in its current fetchStatus
-        const { fetchStatus: _ignored, ...serializedState } = state
-        query.setState({
-          ...serializedState,
-          data,
+  queries.forEach(
+    ({ queryKey, state, queryHash, meta, promise, dehydratedAt }) => {
+      const syncData = promise ? tryResolveSync(promise) : undefined
+      const rawData = state.data === undefined ? syncData?.data : state.data
+      const data = rawData === undefined ? rawData : deserializeData(rawData)
+
+      let query = queryCache.get(queryHash)
+      const existingQueryIsPending = query?.state.status === 'pending'
+
+      // Do not hydrate if an existing query exists with newer data
+      if (query) {
+        const hasNewerSyncData =
+          syncData &&
+          // We only need this undefined check to handle older dehydration
+          // payloads that might not have dehydratedAt
+          dehydratedAt !== undefined &&
+          dehydratedAt > query.state.dataUpdatedAt
+        if (
+          state.dataUpdatedAt > query.state.dataUpdatedAt ||
+          hasNewerSyncData
+        ) {
+          // omit fetchStatus from dehydrated state
+          // so that query stays in its current fetchStatus
+          const { fetchStatus: _ignored, ...serializedState } = state
+          query.setState({
+            ...serializedState,
+            data,
+          })
+        }
+      } else {
+        // Restore query
+        query = queryCache.build(
+          client,
+          {
+            ...client.getDefaultOptions().hydrate?.queries,
+            ...options?.defaultOptions?.queries,
+            queryKey,
+            queryHash,
+            meta,
+          },
+          // Reset fetch status to idle to avoid
+          // query being stuck in fetching state upon hydration
+          {
+            ...state,
+            data,
+            fetchStatus: 'idle',
+            status: data !== undefined ? 'success' : state.status,
+          },
+        )
+      }
+
+      if (
+        promise &&
+        !existingQueryIsPending &&
+        // Only hydrate if dehydration is newer than any existing data,
+        // this is always true for new queries
+        (dehydratedAt === undefined || dehydratedAt > query.state.dataUpdatedAt)
+      ) {
+        // This doesn't actually fetch - it just creates a retryer
+        // which will re-use the passed `initialPromise`
+        // Note that we need to call these even when data was synchronously
+        // available, as we still need to set up the retryer
+        void query.fetch(undefined, {
+          // RSC transformed promises are not thenable
+          initialPromise: Promise.resolve(promise).then(deserializeData),
         })
       }
-    } else {
-      // Restore query
-      query = queryCache.build(
-        client,
-        {
-          ...client.getDefaultOptions().hydrate?.queries,
-          ...options?.defaultOptions?.queries,
-          queryKey,
-          queryHash,
-          meta,
-        },
-        // Reset fetch status to idle to avoid
-        // query being stuck in fetching state upon hydration
-        {
-          ...state,
-          data,
-          fetchStatus: 'idle',
-        },
-      )
-    }
-
-    if (promise) {
-      // Note: `Promise.resolve` required cause
-      // RSC transformed promises are not thenable
-      const initialPromise = Promise.resolve(promise).then(deserializeData)
-
-      // this doesn't actually fetch - it just creates a retryer
-      // which will re-use the passed `initialPromise`
-      void query.fetch(undefined, { initialPromise })
-    }
-  })
+    },
+  )
 }

package/src/streamedQuery.ts

@@ -1,3 +1,4 @@
+import { addToEnd } from './utils'
 import type { QueryFunction, QueryFunctionContext, QueryKey } from './types'
 
 /**
@@ -9,7 +10,11 @@ import type { QueryFunction, QueryFunctionContext, QueryKey } from './types'
  * @param refetchMode - Defines how re-fetches are handled.
  * Defaults to `'reset'`, erases all data and puts the query back into `pending` state.
  * Set to `'append'` to append new data to the existing data.
- * Set to `'replace'` to write the data to the cache at the end of the stream.
+ * Set to `'replace'` to write all data to the cache once the stream ends.
+ * @param maxChunks - The maximum number of chunks to keep in the cache.
+ * Defaults to `undefined`, meaning all chunks will be kept.
+ * If `undefined` or `0`, the number of chunks is unlimited.
+ * If the number of chunks exceeds this number, the oldest chunk will be removed.
  */
 export function streamedQuery<
   TQueryFnData = unknown,
@@ -17,11 +22,13 @@ export function streamedQuery<
 >({
   queryFn,
   refetchMode = 'reset',
+  maxChunks,
 }: {
   queryFn: (
     context: QueryFunctionContext<TQueryKey>,
   ) => AsyncIterable<TQueryFnData> | Promise<AsyncIterable<TQueryFnData>>
   refetchMode?: 'append' | 'reset' | 'replace'
+  maxChunks?: number
 }): QueryFunction<Array<TQueryFnData>, TQueryKey> {
   return async (context) => {
     const query = context.client
@@ -38,7 +45,7 @@ export function streamedQuery<
       })
     }
 
-    const result: Array<TQueryFnData> = []
+    let result: Array<TQueryFnData> = []
     const stream = await queryFn(context)
 
     for await (const chunk of stream) {
@@ -51,11 +58,11 @@ export function streamedQuery<
         context.client.setQueryData<Array<TQueryFnData>>(
           context.queryKey,
           (prev = []) => {
-            return prev.concat([chunk])
+            return addToEnd(prev, chunk, maxChunks)
           },
         )
       }
-      result.push(chunk)
+      result = addToEnd(result, chunk, maxChunks)
     }
 
     // finalize result: replace-refetching needs to write to the cache

package/src/thenable.ts

@@ -7,6 +7,8 @@
  * @see https://github.com/facebook/react/blob/4f604941569d2e8947ce1460a0b2997e835f37b9/packages/react-debug-tools/src/ReactDebugHooks.js#L224-L227
  */
 
+import { noop } from './utils'
+
 interface Fulfilled<T> {
   status: 'fulfilled'
   value: T
@@ -80,3 +82,30 @@ export function pendingThenable<T>(): PendingThenable<T> {
 
   return thenable
 }
+
+/**
+ * This function takes a Promise-like input and detects whether the data
+ * is synchronously available or not.
+ *
+ * It does not inspect .status, .value or .reason properties of the promise,
+ * as those are not always available, and the .status of React's promises
+ * should not be considered part of the public API.
+ */
+export function tryResolveSync(promise: Promise<unknown> | Thenable<unknown>) {
+  let data: unknown
+
+  promise
+    .then((result) => {
+      data = result
+      return result
+    })
+    // .catch can be unavailable on certain kinds of thenable's
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    ?.catch(noop)
+
+  if (data !== undefined) {
+    return { data }
+  }
+
+  return undefined
+}