useReadQuery/useQueryRefHandlers: Fix a "hook order" warning that…

… might be emitted in React 19 dev mode.

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

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 { ApolloClient } from "../../core/ApolloClient.js";
+import type { ObservableQuery } from "../../core/ObservableQuery.js";
 
 export interface UseQueryRefHandlersResult<
   TData = unknown,
@@ -55,21 +57,18 @@ 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",
     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,22 +47,15 @@ export function useReadQuery<TData>(
   queryRef: QueryRef<TData>
 ): UseReadQueryResult<TData> {
   const unwrapped = unwrapQueryRef(queryRef);
-
-  return wrapHook(
-    "useReadQuery",
-    useReadQuery_,
+  const clientOrObsQuery = useApolloClient(
     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()
-  )(queryRef);
+      // 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", useReadQuery_, clientOrObsQuery)(queryRef);
 }
 
 function useReadQuery_<TData>(