From 4c5c820b6172f6a2455bcdd974109513e0e2a39e Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Tue, 14 May 2024 10:56:43 -0600 Subject: [PATCH] Remove `@nonreactive` directives from queries passed to `MockLink` (#11845) --- .changeset/serious-candles-arrive.md | 5 + .size-limits.json | 4 +- .../core/mocking/__tests__/mockLink.ts | 154 ++++++++++++++++++ src/testing/core/mocking/mockLink.ts | 12 +- 4 files changed, 168 insertions(+), 7 deletions(-) create mode 100644 .changeset/serious-candles-arrive.md diff --git a/.changeset/serious-candles-arrive.md b/.changeset/serious-candles-arrive.md new file mode 100644 index 00000000000..4f9a8d4536d --- /dev/null +++ b/.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. diff --git a/.size-limits.json b/.size-limits.json index 05c84cd4f6a..e90e42c4eea 100644 --- a/.size-limits.json +++ b/.size-limits.json @@ -1,4 +1,4 @@ { - "dist/apollo-client.min.cjs": 39581, - "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 32832 + "dist/apollo-client.min.cjs": 39579, + "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 32825 } diff --git a/src/testing/core/mocking/__tests__/mockLink.ts b/src/testing/core/mocking/__tests__/mockLink.ts index dc68b654505..3813f291b47 100644 --- a/src/testing/core/mocking/__tests__/mockLink.ts +++ b/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 } }); + } +}); diff --git a/src/testing/core/mocking/mockLink.ts b/src/testing/core/mocking/mockLink.ts index 46b43cca6ad..09bdf0a6a4a 100644 --- a/src/testing/core/mocking/mockLink.ts +++ b/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> = (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;