@tanstack/query-core 5.48.0 → 5.49.0

package/src/__tests__/hydration.test.tsx

@@ -15,6 +15,11 @@ async function fetchData<TData>(value: TData, ms?: number): Promise<TData> {
   return value
 }
 
+async function fetchDate(value: string, ms?: number): Promise<Date> {
+  await sleep(ms || 0)
+  return new Date(value)
+}
+
 describe('dehydration and rehydration', () => {
   test('should work with serializable values', async () => {
     const queryCache = new QueryCache()
@@ -914,13 +919,14 @@ describe('dehydration and rehydration', () => {
       defaultOptions: {
         dehydrate: {
           shouldDehydrateQuery: () => true,
+          serializeData: (data) => data.toISOString(),
         },
       },
     })
 
     const promise = queryClient.prefetchQuery({
       queryKey: ['transformedStringToDate'],
-      queryFn: () => fetchData('2024-01-01T00:00:00.000Z', 20),
+      queryFn: () => fetchDate('2024-01-01T00:00:00.000Z', 20),
     })
     const dehydrated = dehydrate(queryClient)
     expect(dehydrated.queries[0]?.promise).toBeInstanceOf(Promise)
@@ -928,7 +934,7 @@ describe('dehydration and rehydration', () => {
     const hydrationClient = createQueryClient({
       defaultOptions: {
         hydrate: {
-          transformPromise: (p) => p.then((d) => new Date(d)),
+          deserializeData: (data) => new Date(data),
         },
       },
     })
@@ -943,4 +949,81 @@ describe('dehydration and rehydration', () => {
 
     queryClient.clear()
   })
+
+  test('should transform query data if promise is already resolved', async () => {
+    const queryClient = createQueryClient({
+      defaultOptions: {
+        dehydrate: {
+          shouldDehydrateQuery: () => true,
+          serializeData: (data) => data.toISOString(),
+        },
+      },
+    })
+
+    const promise = queryClient.prefetchQuery({
+      queryKey: ['transformedStringToDate'],
+      queryFn: () => fetchDate('2024-01-01T00:00:00.000Z', 0),
+    })
+    await sleep(20)
+    const dehydrated = dehydrate(queryClient)
+
+    const hydrationClient = createQueryClient({
+      defaultOptions: {
+        hydrate: {
+          deserializeData: (data) => new Date(data),
+        },
+      },
+    })
+
+    hydrate(hydrationClient, dehydrated)
+    await promise
+    await waitFor(() =>
+      expect(
+        hydrationClient.getQueryData(['transformedStringToDate']),
+      ).toBeInstanceOf(Date),
+    )
+
+    queryClient.clear()
+  })
+
+  test('should overwrite query in cache if hydrated query is newer (with transformation)', async () => {
+    const hydrationClient = createQueryClient({
+      defaultOptions: {
+        hydrate: {
+          deserializeData: (data) => new Date(data),
+        },
+      },
+    })
+    await hydrationClient.prefetchQuery({
+      queryKey: ['date'],
+      queryFn: () => fetchDate('2024-01-01T00:00:00.000Z', 5),
+    })
+
+    // ---
+
+    const queryClient = createQueryClient({
+      defaultOptions: {
+        dehydrate: {
+          shouldDehydrateQuery: () => true,
+          serializeData: (data) => data.toISOString(),
+        },
+      },
+    })
+    await queryClient.prefetchQuery({
+      queryKey: ['date'],
+      queryFn: () => fetchDate('2024-01-02T00:00:00.000Z', 10),
+    })
+    const dehydrated = dehydrate(queryClient)
+
+    // ---
+
+    hydrate(hydrationClient, dehydrated)
+
+    expect(hydrationClient.getQueryData(['date'])).toStrictEqual(
+      new Date('2024-01-02T00:00:00.000Z'),
+    )
+
+    queryClient.clear()
+    hydrationClient.clear()
+  })
 })

package/src/focusManager.ts

@@ -17,7 +17,7 @@ export class FocusManager extends Subscribable<Listener> {
     super()
     this.#setup = (onFocus) => {
       // addEventListener does not exist in React Native, but window does
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      // eslint-disable-next-line ts/no-unnecessary-condition
       if (!isServer && window.addEventListener) {
         const listener = () => onFocus()
         // Listen to visibilitychange
@@ -78,7 +78,7 @@ export class FocusManager extends Subscribable<Listener> {
     }
 
     // document global can be unavailable in react native
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    // eslint-disable-next-line ts/no-unnecessary-condition
     return globalThis.document?.visibilityState !== 'hidden'
   }
 }

package/src/hydration.ts

@@ -13,15 +13,20 @@ import type { Query, QueryState } from './query'
 import type { Mutation, MutationState } from './mutation'
 
 // TYPES
+type TransformerFn = (data: any) => any
+function defaultTransformerFn(data: any): any {
+  return data
+}
 
 export interface DehydrateOptions {
+  serializeData?: TransformerFn
   shouldDehydrateMutation?: (mutation: Mutation) => boolean
   shouldDehydrateQuery?: (query: Query) => boolean
 }
 
 export interface HydrateOptions {
   defaultOptions?: {
-    transformPromise?: (promise: Promise<any>) => Promise<any>
+    deserializeData?: TransformerFn
     queries?: QueryOptions
     mutations?: MutationOptions<unknown, DefaultError, unknown, unknown>
   }
@@ -62,13 +67,21 @@ function dehydrateMutation(mutation: Mutation): DehydratedMutation {
 // consuming the de/rehydrated data, typically with useQuery on the client.
 // Sometimes it might make sense to prefetch data on the server and include
 // in the html-payload, but not consume it on the initial render.
-function dehydrateQuery(query: Query): DehydratedQuery {
+function dehydrateQuery(
+  query: Query,
+  serializeData: TransformerFn,
+): DehydratedQuery {
   return {
-    state: query.state,
+    state: {
+      ...query.state,
+      ...(query.state.data !== undefined && {
+        data: serializeData(query.state.data),
+      }),
+    },
     queryKey: query.queryKey,
     queryHash: query.queryHash,
     ...(query.state.status === 'pending' && {
-      promise: query.promise?.catch((error) => {
+      promise: query.promise?.then(serializeData).catch((error) => {
         if (process.env.NODE_ENV !== 'production') {
           console.error(
             `A query that was dehydrated as pending ended up rejecting. [${query.queryHash}]: ${error}; The error will be redacted in production builds`,
@@ -110,10 +123,17 @@ export function dehydrate(
     client.getDefaultOptions().dehydrate?.shouldDehydrateQuery ??
     defaultShouldDehydrateQuery
 
+  const serializeData =
+    options.serializeData ??
+    client.getDefaultOptions().dehydrate?.serializeData ??
+    defaultTransformerFn
+
   const queries = client
     .getQueryCache()
     .getAll()
-    .flatMap((query) => (filterQuery(query) ? [dehydrateQuery(query)] : []))
+    .flatMap((query) =>
+      filterQuery(query) ? [dehydrateQuery(query, serializeData)] : [],
+    )
 
   return { mutations, queries }
 }
@@ -129,10 +149,14 @@ export function hydrate(
 
   const mutationCache = client.getMutationCache()
   const queryCache = client.getQueryCache()
+  const deserializeData =
+    options?.defaultOptions?.deserializeData ??
+    client.getDefaultOptions().hydrate?.deserializeData ??
+    defaultTransformerFn
 
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  // eslint-disable-next-line ts/no-unnecessary-condition
   const mutations = (dehydratedState as DehydratedState).mutations || []
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  // eslint-disable-next-line ts/no-unnecessary-condition
   const queries = (dehydratedState as DehydratedState).queries || []
 
   mutations.forEach(({ state, ...mutationOptions }) => {
@@ -150,13 +174,19 @@ 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, ...dehydratedQueryState } = state
-        query.setState(dehydratedQueryState)
+        const { fetchStatus: _ignored, ...serializedState } = state
+        query.setState({
+          ...serializedState,
+          data,
+        })
       }
     } else {
       // Restore query
@@ -173,19 +203,16 @@ export function hydrate(
         // query being stuck in fetching state upon hydration
         {
           ...state,
+          data,
           fetchStatus: 'idle',
         },
       )
     }
 
     if (promise) {
-      const transformPromise =
-        client.getDefaultOptions().hydrate?.transformPromise
-
       // Note: `Promise.resolve` required cause
       // RSC transformed promises are not thenable
-      const initialPromise =
-        transformPromise?.(Promise.resolve(promise)) ?? promise
+      const initialPromise = Promise.resolve(promise).then(deserializeData)
 
       // this doesn't actually fetch - it just creates a retryer
       // which will re-use the passed `initialPromise`

package/src/onlineManager.ts

@@ -14,7 +14,7 @@ export class OnlineManager extends Subscribable<Listener> {
     super()
     this.#setup = (onOnline) => {
       // addEventListener does not exist in React Native, but window does
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      // eslint-disable-next-line ts/no-unnecessary-condition
       if (!isServer && window.addEventListener) {
         const onlineListener = () => onOnline(true)
         const offlineListener = () => onOnline(false)

package/src/queryClient.ts

@@ -13,10 +13,10 @@ import { focusManager } from './focusManager'
 import { onlineManager } from './onlineManager'
 import { notifyManager } from './notifyManager'
 import { infiniteQueryBehavior } from './infiniteQueryBehavior'
-import type { DataTag, NoInfer, OmitKeyof } from './types'
 import type { QueryState } from './query'
 import type {
   CancelOptions,
+  DataTag,
   DefaultError,
   DefaultOptions,
   DefaultedQueryObserverOptions,
@@ -29,6 +29,8 @@ import type {
   MutationKey,
   MutationObserverOptions,
   MutationOptions,
+  NoInfer,
+  OmitKeyof,
   QueryClientConfig,
   QueryKey,
   QueryObserverOptions,