From e72cbba07e5caa6d75b44ca8c766846e855a6c93 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Thu, 11 Apr 2024 14:50:20 +0200 Subject: [PATCH] Wrap `useQueryRefHandlers` in `wrapHook`. (#11771) * Wrap `useQueryRefHandlers` in `wrapHook`. * Clean up Prettier, Size-limit, and Api-Extractor --------- Co-authored-by: phryneas --- .api-reports/api-report-react_internal.md | 15 ++++++++++ .changeset/kind-foxes-float.md | 5 ++++ .size-limits.json | 2 +- src/react/hooks/internal/wrapHook.ts | 2 ++ src/react/hooks/useQueryRefHandlers.ts | 35 ++++++++++++++++++++++- 5 files changed, 57 insertions(+), 2 deletions(-) create mode 100644 .changeset/kind-foxes-float.md diff --git a/.api-reports/api-report-react_internal.md b/.api-reports/api-report-react_internal.md index b6fd468f689..0be4d2b9cb8 100644 --- a/.api-reports/api-report-react_internal.md +++ b/.api-reports/api-report-react_internal.md @@ -1936,6 +1936,17 @@ type UseFragmentResult = { // @public function useQuery(query: DocumentNode | TypedDocumentNode, options?: QueryHookOptions, NoInfer>): QueryResult; +// Warning: (ae-forgotten-export) The symbol "UseQueryRefHandlersResult" needs to be exported by the entry point index.d.ts +// +// @public +function useQueryRefHandlers(queryRef: QueryReference): UseQueryRefHandlersResult; + +// @public (undocumented) +interface UseQueryRefHandlersResult { + fetchMore: FetchMoreFunction; + refetch: RefetchFunction; +} + // Warning: (ae-forgotten-export) The symbol "UseReadQueryResult" needs to be exported by the entry point index.d.ts // // @public (undocumented) @@ -2056,6 +2067,10 @@ interface WrappableHooks { // // (undocumented) useQuery: typeof useQuery; + // Warning: (ae-forgotten-export) The symbol "useQueryRefHandlers" needs to be exported by the entry point index.d.ts + // + // (undocumented) + useQueryRefHandlers: typeof useQueryRefHandlers; // Warning: (ae-forgotten-export) The symbol "useReadQuery" needs to be exported by the entry point index.d.ts // // (undocumented) diff --git a/.changeset/kind-foxes-float.md b/.changeset/kind-foxes-float.md new file mode 100644 index 00000000000..0ecc3a14155 --- /dev/null +++ b/.changeset/kind-foxes-float.md @@ -0,0 +1,5 @@ +--- +"@apollo/client": patch +--- + +Wrap `useQueryRefHandlers` in `wrapHook`. diff --git a/.size-limits.json b/.size-limits.json index a7f4a70263d..3ad88477003 100644 --- a/.size-limits.json +++ b/.size-limits.json @@ -1,4 +1,4 @@ { - "dist/apollo-client.min.cjs": 39530, + "dist/apollo-client.min.cjs": 39538, "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 32809 } diff --git a/src/react/hooks/internal/wrapHook.ts b/src/react/hooks/internal/wrapHook.ts index abf9a49c035..c22ec726e9d 100644 --- a/src/react/hooks/internal/wrapHook.ts +++ b/src/react/hooks/internal/wrapHook.ts @@ -4,6 +4,7 @@ import type { useBackgroundQuery, useReadQuery, useFragment, + useQueryRefHandlers, } from "../index.js"; import type { QueryManager } from "../../../core/QueryManager.js"; import type { ApolloClient } from "../../../core/ApolloClient.js"; @@ -17,6 +18,7 @@ interface WrappableHooks { useBackgroundQuery: typeof useBackgroundQuery; useReadQuery: typeof useReadQuery; useFragment: typeof useFragment; + useQueryRefHandlers: typeof useQueryRefHandlers; } /** diff --git a/src/react/hooks/useQueryRefHandlers.ts b/src/react/hooks/useQueryRefHandlers.ts index b0422afa678..0d6809e6ca6 100644 --- a/src/react/hooks/useQueryRefHandlers.ts +++ b/src/react/hooks/useQueryRefHandlers.ts @@ -5,10 +5,15 @@ import { updateWrappedQueryRef, wrapQueryRef, } from "../internal/index.js"; -import type { QueryReference } from "../internal/index.js"; +import type { + InternalQueryReference, + QueryReference, +} from "../internal/index.js"; import type { OperationVariables } from "../../core/types.js"; import type { RefetchFunction, FetchMoreFunction } from "./useSuspenseQuery.js"; import type { FetchMoreQueryOptions } from "../../core/watchQueryOptions.js"; +import { useApolloClient } from "./useApolloClient.js"; +import { wrapHook } from "./internal/index.js"; export interface UseQueryRefHandlersResult< TData = unknown, @@ -44,6 +49,34 @@ export function useQueryRefHandlers< TVariables extends OperationVariables = OperationVariables, >( queryRef: QueryReference +): UseQueryRefHandlersResult { + 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( + "useQueryRefHandlers", + _useQueryRefHandlers, + 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); +} + +function _useQueryRefHandlers< + TData = unknown, + TVariables extends OperationVariables = OperationVariables, +>( + queryRef: QueryReference ): UseQueryRefHandlersResult { const [previousQueryRef, setPreviousQueryRef] = React.useState(queryRef); const [wrappedQueryRef, setWrappedQueryRef] = React.useState(queryRef);