push

integrations/react-next-15/app/make-query-client.ts

@@ -27,7 +27,6 @@ export function makeQueryClient() {
          * promise, before the query data is put into the cache.
          */
         deserializeData: (data) => {
-          console.log('deserializeData', data)
           return tson.deserialize(data)
         },
       },
@@ -36,7 +35,6 @@ export function makeQueryClient() {
       },
       dehydrate: {
         serializeData: (data) => {
-          console.log('serializeData', data)
           return tson.serialize(data)
         },
         shouldDehydrateQuery: (query) => {

integrations/react-next-15/app/page.tsx

@@ -29,8 +29,6 @@ export default function Home() {
 
   const state = dehydrate(queryClient)
 
-  console.log('state', state)
-
   return (
     <main>
       <HydrationBoundary state={state}>

integrations/react-next-15/app/providers.tsx

@@ -1,16 +1,24 @@
 'use client'
-import { QueryClientProvider } from '@tanstack/react-query'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+// import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import * as React from 'react'
 import { makeQueryClient } from '@/app/make-query-client'
 
+let queryClientSingleton: QueryClient | undefined
+const getQueryClientSingleton = () => {
+  if (typeof window !== 'undefined') {
+    return makeQueryClient()
+  }
+  return (queryClientSingleton ??= makeQueryClient())
+}
 export default function Providers({ children }: { children: React.ReactNode }) {
-  const [queryClient] = React.useState(() => makeQueryClient())
+  // const [queryClient] = React.useState(() => makeQueryClient())
+  const queryClient = getQueryClientSingleton()
 
   return (
     <QueryClientProvider client={queryClient}>
       {children}
-      <ReactQueryDevtools />
+      {/* <ReactQueryDevtools /> */}
     </QueryClientProvider>
   )
 }

packages/query-core/package.json

@@ -29,7 +29,8 @@
     "test:lib": "vitest",
     "test:lib:dev": "pnpm run test:lib --watch",
     "test:build": "publint --strict && attw --pack",
-    "build": "tsup"
+    "build": "tsup",
+    "build:dev": "tsup --watch"
   },
   "type": "module",
   "types": "build/legacy/index.d.ts",

packages/query-core/src/hydration.ts

@@ -77,6 +77,9 @@ function dehydrateQuery(
       ...(query.state.data !== undefined && {
         data: serializeData(query.state.data),
       }),
+      ...(query.state.fetchStatus === 'fetching' && {
+        promiseDehydratedAt: Date.now(),
+      }),
     },
     queryKey: query.queryKey,
     queryHash: query.queryHash,
@@ -128,24 +131,21 @@ export function dehydrate(
     client.getDefaultOptions().dehydrate?.serializeData ??
     defaultTransformerFn
 
-  const queries = client.getQueryCache().getAll()
-
-  const filteredQueries = queries.flatMap((query) =>
-    filterQuery(query) ? [dehydrateQuery(query, serializeData)] : [],
-  )
-
-  console.log('[dehydrate] queries', queries)
-  console.log('[dehydrate] filteredQueries', filteredQueries)
+  const queries = client
+    .getQueryCache()
+    .getAll()
+    .flatMap((query) =>
+      filterQuery(query) ? [dehydrateQuery(query, serializeData)] : [],
+    )
 
-  return { mutations, queries: filteredQueries }
+  return { mutations, queries }
 }
 
 export function hydrate(
   client: QueryClient,
   dehydratedState: unknown,
   options?: HydrateOptions,
 ): void {
-  console.log('[hydrate] dehydratedState', dehydratedState)
   if (typeof dehydratedState !== 'object' || dehydratedState === null) {
     return
   }
@@ -180,8 +180,7 @@ export function hydrate(
     const data =
       state.data === undefined ? state.data : deserializeData(state.data)
 
-    console.log('[hydrate] data', data)
-    console.log('[hydrate] query', query)
+    console.log('[hydrate] query', query?.state)
 
     // Do not hydrate if an existing query exists with newer data
     if (query) {

packages/query-core/src/query.ts

@@ -56,6 +56,7 @@ export interface QueryState<TData = unknown, TError = DefaultError> {
   isInvalidated: boolean
   status: QueryStatus
   fetchStatus: FetchStatus
+  promiseDehydratedAt: number
 }
 
 export interface FetchContext<
@@ -679,5 +680,6 @@ function getDefaultState<
     isInvalidated: false,
     status: hasData ? 'success' : 'pending',
     fetchStatus: 'idle',
+    promiseDehydratedAt: 0,
   }
 }

packages/react-query/package.json

@@ -31,6 +31,7 @@
     "test:build": "publint --strict && attw --pack",
     "build": "pnpm build:tsup && pnpm build:codemods",
     "build:tsup": "tsup",
+    "build:tsup:dev": "tsup --watch",
     "build:codemods": "cpy ../query-codemods/* ./build/codemods"
   },
   "type": "module",

packages/react-query/src/HydrationBoundary.tsx

@@ -68,20 +68,29 @@ export const HydrationBoundary = ({
       for (const dehydratedQuery of queries) {
         const existingQuery = queryCache.get(dehydratedQuery.queryHash)
 
-        console.log('existingQuery', existingQuery)
+        console.log(
+          '[HydrationBoundary] existingQuery',
+          JSON.stringify(existingQuery?.state, null, 2),
+        )
+        console.log(
+          '[HydrationBoundary] dehydratedQuery',
+          JSON.stringify(dehydratedQuery.state, null, 2),
+        )
         if (!existingQuery) {
           newQueries.push(dehydratedQuery)
         } else {
           const hydrationIsNewer =
             dehydratedQuery.state.dataUpdatedAt >
-            existingQuery.state.dataUpdatedAt
+              existingQuery.state.dataUpdatedAt ||
+            dehydratedQuery.state.promiseDehydratedAt >
+              existingQuery.state.promiseDehydratedAt
 
           console.log(
-            'hydrationIsNewer',
+            '[HydrationBoundary] hydrationIsNewer',
             dehydratedQuery.queryKey,
             hydrationIsNewer,
-            dehydratedQuery.state.dataUpdatedAt,
-            existingQuery.state.dataUpdatedAt,
+            dehydratedQuery.state.promiseDehydratedAt,
+            existingQuery.state.promiseDehydratedAt,
           )
 
           const queryAlreadyQueued = hydrationQueue?.find(
@@ -99,10 +108,6 @@ export const HydrationBoundary = ({
         }
       }
 
-      console.log('queries', queries)
-      console.log('newQueries', newQueries)
-      console.log('existingQueries', existingQueries)
-
       if (newQueries.length > 0) {
         // It's actually fine to call this with queries/state that already exists
         // in the cache, or is older. hydrate() is idempotent for queries.