useReadQuery/useQueryRefHandlers: Fix a "hook order" warning that might be emitted in React 19 dev mode. (#12341)

* `useReadQuery`/`useQueryRefHandlers`: Fix a "hook order" warning that might be emitted in React 19 dev mode. * change import to type * add two eslint-disables * Clean up Prettier, Size-limit, and Api-Extractor --------- Co-authored-by: phryneas <4282439+phryneas@users.noreply.github.com>

Author: phryneas

.changeset/large-timers-lay.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+`useReadQuery`/`useQueryRefHandlers`: Fix a "hook order" warning that might be emitted in React 19 dev mode.

.size-limits.json

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

src/react/hooks/useQueryRefHandlers.ts

@@ -16,6 +16,8 @@ import type {
 import type { FetchMoreQueryOptions } from "../../core/watchQueryOptions.js";
 import { useApolloClient } from "./useApolloClient.js";
 import { wrapHook } from "./internal/index.js";
+import type { ApolloClient } from "../../core/ApolloClient.js";
+import type { ObservableQuery } from "../../core/ObservableQuery.js";
 
 export interface UseQueryRefHandlersResult<
  TData = unknown,
@@ -55,21 +57,19 @@ export function useQueryRefHandlers<
  queryRef: QueryRef<TData, TVariables>
 ): UseQueryRefHandlersResult<TData, TVariables> {
  const unwrapped = unwrapQueryRef(queryRef);
+ const clientOrObsQuery = useApolloClient(
+ unwrapped ?
+ // passing an `ObservableQuery` is not supported by the types, but it will
+ // return any truthy value that is passed in as an override so we cast the result
+ (unwrapped["observable"] as any)
+ : undefined
+ ) as ApolloClient<any> | ObservableQuery<TData>;
 
  return wrapHook(
  "useQueryRefHandlers",
+ // eslint-disable-next-line react-compiler/react-compiler
  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
- // This is just a context read - it's fine to do this conditionally.
- // This hook wrapper also shouldn't be optimized by React Compiler.
- // eslint-disable-next-line react-compiler/react-compiler
- // eslint-disable-next-line react-hooks/rules-of-hooks
- : useApolloClient()
+ clientOrObsQuery
  )(queryRef);
 }
 

src/react/hooks/useReadQuery.ts

@@ -10,7 +10,11 @@ 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 type {
+ ApolloClient,
+ NetworkStatus,
+ ObservableQuery,
+} from "../../core/index.js";
 import { useApolloClient } from "./useApolloClient.js";
 import type { MaybeMasked } from "../../masking/index.js";
 
@@ -43,21 +47,19 @@ export function useReadQuery<TData>(
  queryRef: QueryRef<TData>
 ): UseReadQueryResult<TData> {
  const unwrapped = unwrapQueryRef(queryRef);
+ const clientOrObsQuery = useApolloClient(
+ unwrapped ?
+ // passing an `ObservableQuery` is not supported by the types, but it will
+ // return any truthy value that is passed in as an override so we cast the result
+ (unwrapped["observable"] as any)
+ : undefined
+ ) as ApolloClient<any> | ObservableQuery<TData>;
 
  return wrapHook(
  "useReadQuery",
+ // eslint-disable-next-line react-compiler/react-compiler
  useReadQuery_,
- 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
- // This is just a context read - it's fine to do this conditionally.
- // This hook wrapper also shouldn't be optimized by React Compiler.
- // eslint-disable-next-line react-compiler/react-compiler
- // eslint-disable-next-line react-hooks/rules-of-hooks
- : useApolloClient()
+ clientOrObsQuery
  )(queryRef);
 }