diff --git a/.changeset/hungry-bobcats-battle.md b/.changeset/hungry-bobcats-battle.md new file mode 100644 index 00000000000..c01bffc7356 --- /dev/null +++ b/.changeset/hungry-bobcats-battle.md @@ -0,0 +1,5 @@ +--- +"@apollo/client": patch +--- + +Adjust `useReadQuery` wrapper logic to work with transported objects. diff --git a/.size-limits.json b/.size-limits.json index 7d54db2a009..cdb1025e4ce 100644 --- a/.size-limits.json +++ b/.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 } diff --git a/src/react/hooks/useReadQuery.ts b/src/react/hooks/useReadQuery.ts index 6c1ff70d4e8..6add98a094b 100644 --- a/src/react/hooks/useReadQuery.ts +++ b/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 { /** @@ -39,10 +43,25 @@ export interface UseReadQueryResult { export function useReadQuery( queryRef: QueryReference ): UseReadQueryResult { + const unwrapped = unwrapQueryRef( + queryRef + ) satisfies InternalQueryReference 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 | 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); }