fix(core): only attach .then and .catch onto a promise if it gets dehydrated (#9847)

* fix(core): only attach .then and .catch onto a promise if it gets dehydrated

* Fix promise handling in core for dehydrated states

Ensure .then and .catch are only attached to dehydrated promises.

Author: TkDodo

.changeset/little-berries-search.md

@@ -0,0 +1,5 @@
+---
+"@tanstack/query-core": patch
+---
+
+fix(core): only attach .then and .catch onto a promise if it gets dehydrated

packages/query-core/src/hydration.ts

@@ -79,25 +79,29 @@ function dehydrateQuery(
   serializeData: TransformerFn,
   shouldRedactErrors: (error: unknown) => boolean,
 ): DehydratedQuery {
-  const promise = query.promise?.then(serializeData).catch((error) => {
-    if (!shouldRedactErrors(error)) {
-      // Reject original error if it should not be redacted
-      return Promise.reject(error)
-    }
-    // If not in production, log original error before rejecting redacted 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`,
-      )
-    }
-    return Promise.reject(new Error('redacted'))
-  })
+  const dehydratePromise = () => {
+    const promise = query.promise?.then(serializeData).catch((error) => {
+      if (!shouldRedactErrors(error)) {
+        // Reject original error if it should not be redacted
+        return Promise.reject(error)
+      }
+      // If not in production, log original error before rejecting redacted 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`,
+        )
+      }
+      return Promise.reject(new Error('redacted'))
+    })
+
+    // Avoid unhandled promise rejections
+    // We need the promise we dehydrate to reject to get the correct result into
+    // the query cache, but we also want to avoid unhandled promise rejections
+    // in whatever environment the prefetches are happening in.
+    promise?.catch(noop)
 
-  // Avoid unhandled promise rejections
-  // We need the promise we dehydrate to reject to get the correct result into
-  // the query cache, but we also want to avoid unhandled promise rejections
-  // in whatever environment the prefetches are happening in.
-  promise?.catch(noop)
+    return promise
+  }
 
   return {
     dehydratedAt: Date.now(),
@@ -110,7 +114,7 @@ function dehydrateQuery(
     queryKey: query.queryKey,
     queryHash: query.queryHash,
     ...(query.state.status === 'pending' && {
-      promise,
+      promise: dehydratePromise(),
     }),
     ...(query.meta && { meta: query.meta }),
   }