Add support for passing in client into useFragment (#11525)

Co-authored-by: Jerel Miller <jerelmiller@gmail.com>
Co-authored-by: Alessia Bellisario <github@bellisar.io>

.changeset/brave-cougars-applaud.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Allows passing in client via options to useFragment

src/react/hooks/__tests__/useFragment.test.tsx

@@ -333,6 +333,55 @@ describe("useFragment", () => {
     screen.getByText(/Item #1/);
   });
 
+  it("allows the client to be overriden", () => {
+    const ItemFragment: TypedDocumentNode<Item> = gql`
+      fragment ItemFragment on Item {
+        id
+        text
+      }
+    `;
+    const cache = new InMemoryCache();
+    const item = { __typename: "Item", id: 1, text: "Item #1" };
+    cache.writeFragment({
+      fragment: ItemFragment,
+      data: item,
+    });
+    const client = new ApolloClient({
+      cache,
+    });
+    function Component() {
+      const { data } = useFragment({
+        fragment: ItemFragment,
+        from: { __typename: "Item", id: 1 },
+        client,
+      });
+      return <>{data.text}</>;
+    }
+
+    // Without a MockedProvider supplying the client via context,
+    // the client must be passed directly to the hook or an error is thrown
+    expect(() => render(<Component />)).not.toThrow(/pass an ApolloClient/);
+
+    // Item #1 is rendered
+    screen.getByText(/Item #1/);
+  });
+
+  it("throws if no client is provided", () => {
+    function Component() {
+      const { data } = useFragment({
+        fragment: ItemFragment,
+        from: { __typename: "Item", id: 1 },
+      });
+      return <>{data.text}</>;
+    }
+
+    // silence the console error
+    {
+      using _spy = spyOnConsole("error");
+      expect(() => render(<Component />)).toThrow(/pass an ApolloClient/);
+    }
+  });
+
   it.each<TypedDocumentNode<{ list: Item[] }>>([
     // This query uses a basic field-level @nonreactive directive.
     gql`
@@ -1721,6 +1770,7 @@ describe.skip("Type Tests", () => {
       optimistic?: boolean;
       variables?: TVars;
       canonizeResults?: boolean;
+      client?: ApolloClient<any>;
     }>();
   });
 });

src/react/hooks/useFragment.ts

@@ -12,7 +12,7 @@ import type {
 
 import { useApolloClient } from "./useApolloClient.js";
 import { useSyncExternalStore } from "./useSyncExternalStore.js";
-import type { OperationVariables } from "../../core/index.js";
+import type { ApolloClient, OperationVariables } from "../../core/index.js";
 import type { NoInfer } from "../types/types.js";
 import { useDeepMemo, useLazyRef } from "./internal/index.js";
 
@@ -28,6 +28,15 @@ export interface UseFragmentOptions<TData, TVars>
   from: StoreObject | Reference | string;
   // Override this field to make it optional (default: true).
   optimistic?: boolean;
+  /**
+   * The instance of {@link ApolloClient} to use to look up the fragment.
+   *
+   * By default, the instance that's passed down via context is used, but you
+   * can provide a different instance here.
+   *
+   * @docGroup 1. Operation options
+   */
+  client?: ApolloClient<any>;
 }
 
 export type UseFragmentResult<TData> =
@@ -45,7 +54,7 @@ export type UseFragmentResult<TData> =
 export function useFragment<TData = any, TVars = OperationVariables>(
   options: UseFragmentOptions<TData, TVars>
 ): UseFragmentResult<TData> {
-  const { cache } = useApolloClient();
+  const { cache } = useApolloClient(options.client);
 
   const diffOptions = useDeepMemo<Cache.DiffOptions<TData, TVars>>(() => {
     const {