Remove @nonreactive directives from queries passed to MockLink

.changeset/serious-candles-arrive.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Remove `@nonreactive` directives from queries passed to `MockLink` to ensure they are properly matched.

src/testing/core/mocking/__tests__/mockLink.ts

@@ -1,6 +1,7 @@
 import gql from "graphql-tag";
 import { MockLink, MockedResponse } from "../mockLink";
 import { execute } from "../../../../link/core/execute";
+import { ObservableStream } from "../../../internal";
 
 describe("MockedResponse.newData", () => {
   const setup = () => {
@@ -126,3 +127,156 @@ describe("mockLink", () => {
     jest.advanceTimersByTime(MAXIMUM_DELAY);
   });
 });
+
+test("removes @nonreactive directives from fields", async () => {
+  const serverQuery = gql`
+    query A {
+      a
+      b
+      c
+    }
+  `;
+
+  const link = new MockLink([
+    {
+      request: {
+        query: gql`
+          query A {
+            a
+            b
+            c @nonreactive
+          }
+        `,
+      },
+      result: { data: { a: 1, b: 2, c: 3 } },
+    },
+    {
+      request: {
+        query: gql`
+          query A {
+            a
+            b
+            c
+          }
+        `,
+      },
+      result: { data: { a: 4, b: 5, c: 6 } },
+    },
+  ]);
+
+  {
+    const stream = new ObservableStream(execute(link, { query: serverQuery }));
+
+    await expect(stream.takeNext()).resolves.toEqual({
+      data: { a: 1, b: 2, c: 3 },
+    });
+  }
+
+  {
+    const stream = new ObservableStream(execute(link, { query: serverQuery }));
+
+    await expect(stream.takeNext()).resolves.toEqual({
+      data: { a: 4, b: 5, c: 6 },
+    });
+  }
+});
+
+test("removes @connection directives", async () => {
+  const serverQuery = gql`
+    query A {
+      a
+      b
+      c
+    }
+  `;
+
+  const link = new MockLink([
+    {
+      request: {
+        query: gql`
+          query A {
+            a
+            b
+            c @connection(key: "test")
+          }
+        `,
+      },
+      result: { data: { a: 1, b: 2, c: 3 } },
+    },
+    {
+      request: {
+        query: gql`
+          query A {
+            a
+            b
+            c
+          }
+        `,
+      },
+      result: { data: { a: 4, b: 5, c: 6 } },
+    },
+  ]);
+
+  {
+    const stream = new ObservableStream(execute(link, { query: serverQuery }));
+
+    await expect(stream.takeNext()).resolves.toEqual({
+      data: { a: 1, b: 2, c: 3 },
+    });
+  }
+
+  {
+    const stream = new ObservableStream(execute(link, { query: serverQuery }));
+
+    await expect(stream.takeNext()).resolves.toEqual({
+      data: { a: 4, b: 5, c: 6 },
+    });
+  }
+});
+
+test("removes fields with @client directives", async () => {
+  const serverQuery = gql`
+    query A {
+      a
+      b
+    }
+  `;
+
+  const link = new MockLink([
+    {
+      request: {
+        query: gql`
+          query A {
+            a
+            b
+            c @client
+          }
+        `,
+      },
+      result: { data: { a: 1, b: 2 } },
+    },
+    {
+      request: {
+        query: gql`
+          query A {
+            a
+            b
+          }
+        `,
+      },
+      result: { data: { a: 3, b: 4 } },
+    },
+  ]);
+
+  {
+    const stream = new ObservableStream(execute(link, { query: serverQuery }));
+
+    await expect(stream.takeNext()).resolves.toEqual({ data: { a: 1, b: 2 } });
+  }
+
+  {
+    const stream = new ObservableStream(execute(link, { query: serverQuery }));
+
+    await expect(stream.takeNext()).resolves.toEqual({ data: { a: 3, b: 4 } });
+  }
+});

src/testing/core/mocking/mockLink.ts

@@ -13,10 +13,11 @@ import {
   Observable,
   addTypenameToDocument,
   removeClientSetsFromDocument,
-  removeConnectionDirectiveFromDocument,
   cloneDeep,
   stringifyForDisplay,
   print,
+  removeDirectivesFromDocument,
+  checkDocument,
 } from "../../../utilities/index.js";
 
 export type ResultFunction<T, V = Record<string, any>> = (variables: V) => T;
@@ -202,11 +203,12 @@ ${unmatchedVars.map((d) => `  ${stringifyForDisplay(d)}`).join("\n")}
     mockedResponse: MockedResponse
   ): MockedResponse {
     const newMockedResponse = cloneDeep(mockedResponse);
-    const queryWithoutConnection = removeConnectionDirectiveFromDocument(
-      newMockedResponse.request.query
+    const queryWithoutClientOnlyDirectives = removeDirectivesFromDocument(
+      [{ name: "connection" }, { name: "nonreactive" }],
+      checkDocument(newMockedResponse.request.query)
     );
-    invariant(queryWithoutConnection, "query is required");
-    newMockedResponse.request.query = queryWithoutConnection!;
+    invariant(queryWithoutClientOnlyDirectives, "query is required");
+    newMockedResponse.request.query = queryWithoutClientOnlyDirectives!;
     const query = removeClientSetsFromDocument(newMockedResponse.request.query);
     if (query) {
       newMockedResponse.request.query = query;