From 3dd64324dc5156450cead27f8141ea93315ffe65 Mon Sep 17 00:00:00 2001
From: Lenz Weber-Tronic <lorenz.weber-tronic@apollographql.com>
Date: Wed, 10 Jul 2024 21:25:02 +0200
Subject: [PATCH] `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 |  5 ++
 .size-limits.json              |  4 +-
 src/__tests__/ApolloClient.ts  | 96 ++++++++++++++++++++++++++++++++++
 src/cache/core/cache.ts        |  9 +++-
 4 files changed, 111 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/good-suns-happen.md

diff --git a/.changeset/good-suns-happen.md b/.changeset/good-suns-happen.md
new file mode 100644
index 00000000000..e184b2c1d09
--- /dev/null
+++ b/.changeset/good-suns-happen.md
@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+`watchFragment`: forward additional options to `diffOptions`
diff --git a/.size-limits.json b/.size-limits.json
index d8cc123efe5..c6da4a36f8f 100644
--- a/.size-limits.json
+++ b/.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
 }
diff --git a/src/__tests__/ApolloClient.ts b/src/__tests__/ApolloClient.ts
index 8ba8ccf7ab5..599a29f9a39 100644
--- a/src/__tests__/ApolloClient.ts
+++ b/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", () => {
diff --git a/src/cache/core/cache.ts b/src/cache/core/cache.ts
index d25c5928332..f4b7dd9b599 100644
--- a/src/cache/core/cache.ts
+++ b/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,