watchFragment: forward additional options to diffOptions (#11926)

* `watchFragment`: forward additional options to `diffOptions`
fixes #11924

* chore: bump .size-limits.json

* chore: bump .size-limits.json

* Clean up Prettier, Size-limit, and Api-Extractor

---------

Co-authored-by: Alessia Bellisario <github@bellisar.io>
Co-authored-by: alessbell <alessbell@users.noreply.github.com>

.changeset/good-suns-happen.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+`watchFragment`: forward additional options to `diffOptions`

.size-limits.json

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

src/__tests__/ApolloClient.ts

@@ -2419,6 +2419,102 @@ describe("ApolloClient", () => {
         new Error("Timeout waiting for next event")
       );
     });
+    it("works with `variables`", async () => {
+      const cache = new InMemoryCache();
+      const client = new ApolloClient({
+        cache,
+        link: ApolloLink.empty(),
+      });
+      const ItemFragment = gql`
+        fragment ItemFragment on Item {
+          id
+          text(language: $language)
+        }
+      `;
+
+      cache.writeFragment({
+        fragment: ItemFragment,
+        data: {
+          __typename: "Item",
+          id: 5,
+          text: "Item #5",
+        },
+        variables: { language: "Esperanto" },
+      });
+
+      const observable = client.watchFragment({
+        fragment: ItemFragment,
+        from: { __typename: "Item", id: 5 },
+        variables: { language: "Esperanto" },
+      });
+
+      const stream = new ObservableStream(observable);
+
+      {
+        const result = await stream.takeNext();
+
+        expect(result).toStrictEqual({
+          data: {
+            __typename: "Item",
+            id: 5,
+            text: "Item #5",
+          },
+          complete: true,
+        });
+      }
+    });
+    it("supports the @includes directive with `variables`", async () => {
+      const cache = new InMemoryCache();
+      const client = new ApolloClient({
+        cache,
+        link: ApolloLink.empty(),
+      });
+      const ItemFragment = gql`
+        fragment ItemFragment on Item {
+          id
+          text @include(if: $withText)
+        }
+      `;
+
+      cache.writeFragment({
+        fragment: ItemFragment,
+        data: {
+          __typename: "Item",
+          id: 5,
+          text: "Item #5",
+        },
+        variables: { withText: true },
+      });
+      cache.writeFragment({
+        fragment: ItemFragment,
+        data: {
+          __typename: "Item",
+          id: 5,
+        },
+        variables: { withText: false },
+      });
+
+      const observable = client.watchFragment({
+        fragment: ItemFragment,
+        from: { __typename: "Item", id: 5 },
+        variables: { withText: true },
+      });
+
+      const stream = new ObservableStream(observable);
+
+      {
+        const result = await stream.takeNext();
+
+        expect(result).toStrictEqual({
+          data: {
+            __typename: "Item",
+            id: 5,
+            text: "Item #5",
+          },
+          complete: true,
+        });
+      }
+    });
   });
 
   describe("defaultOptions", () => {

src/cache/core/cache.ts

@@ -228,10 +228,17 @@ export abstract class ApolloCache<TSerialized> implements DataProxy {
   public watchFragment<TData = any, TVars = OperationVariables>(
     options: WatchFragmentOptions<TData, TVars>
   ): Observable<WatchFragmentResult<TData>> {
-    const { fragment, fragmentName, from, optimistic = true } = options;
+    const {
+      fragment,
+      fragmentName,
+      from,
+      optimistic = true,
+      ...otherOptions
+    } = options;
     const query = this.getFragmentDoc(fragment, fragmentName);
 
     const diffOptions: Cache.DiffOptions<TData, TVars> = {
+      ...otherOptions,
       returnPartialData: true,
       id: typeof from === "string" ? from : this.identify(from),
       query,