Merge branch 'release-3.10' into issue-11758-merging-resolvers

.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
 }

ROADMAP.md

@@ -1,6 +1,6 @@
 # 🔮 Apollo Client Roadmap
 
-**Last updated: 2024-02-12**
+**Last updated: 2024-04-08**
 
 For up to date release notes, refer to the project's [Changelog](https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md).
 
@@ -13,18 +13,18 @@ For up to date release notes, refer to the project's [Changelog](https://github.
 
 ---
 
-## [3.10.0](https://github.com/apollographql/apollo-client/milestone/33) - April 9th, 2024
+## [3.10.0](https://github.com/apollographql/apollo-client/milestone/33) - April 15th, 2024
 
 - RC target: April 2nd, 2024
 
 ## Upcoming features
 
+- Core `watchFragment` API to provide `useFragment`-like functionality for non-React envs
 - schema-driven testing utilities
-- Introduce a suspenseful `useFragment` that will suspend when the data is not yet loaded
 - Data masking
+- Introduce a suspenseful `useFragment` that will suspend when the data is not yet loaded
 - leaner client (under alternate entry point)
 - Better types for `useQuery`/`useMutation`/`useSubscription`
-- Core `watchFragment` API to provide `useFragment`-like functionality for non-React envs
 
 ## 4.0
 

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);
 }