Adjust useReadQuery wrapper logic to work with transported objects. (#…

…11757)

* Adjust `useReadQuery` wrapper logic to work with transported objects.

* size-limit

.changeset/hungry-bobcats-battle.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Adjust `useReadQuery` wrapper logic to work with transported objects.

.size-limits.json

@@ -1,4 +1,4 @@
 {
-  "dist/apollo-client.min.cjs": 39518,
+  "dist/apollo-client.min.cjs": 39523,
   "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 32809
 }

src/react/hooks/useReadQuery.ts

@@ -4,12 +4,16 @@ import {
   unwrapQueryRef,
   updateWrappedQueryRef,
 } from "../internal/index.js";
-import type { QueryReference } from "../internal/index.js";
+import type {
+  InternalQueryReference,
+  QueryReference,
+} from "../internal/index.js";
 import { __use, wrapHook } from "./internal/index.js";
 import { toApolloError } from "./useSuspenseQuery.js";
 import { useSyncExternalStore } from "./useSyncExternalStore.js";
 import type { ApolloError } from "../../errors/index.js";
 import type { NetworkStatus } from "../../core/index.js";
+import { useApolloClient } from "./useApolloClient.js";
 
 export interface UseReadQueryResult<TData = unknown> {
   /**
@@ -39,10 +43,25 @@ export interface UseReadQueryResult<TData = unknown> {
 export function useReadQuery<TData>(
   queryRef: QueryReference<TData>
 ): UseReadQueryResult<TData> {
+  const unwrapped = unwrapQueryRef(
+    queryRef
+  ) satisfies InternalQueryReference<TData> as /*
+    by all rules of this codebase, this should never be undefined
+    but if `queryRef` is a transported object, it cannot have a
+    `QUERY_REFERENCE_SYMBOL` symbol property, so the call above
+    will return `undefined` and we want that represented in the type
+    */ InternalQueryReference<TData> | undefined;
+
   return wrapHook(
     "useReadQuery",
     _useReadQuery,
-    unwrapQueryRef(queryRef)["observable"]
+    unwrapped ?
+      unwrapped["observable"]
+      // in the case of a "transported" queryRef object, we need to use the
+      // client that's available to us at the current position in the React tree
+      // that ApolloClient will then have the job to recreate a real queryRef from
+      // the transported object
+    : useApolloClient()
   )(queryRef);
 }