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/ROADMAP.md b/ROADMAP.md index 718d8e4bf55..b9ddddb0442 100644 --- a/ROADMAP.md +++ b/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 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); }