Allow merging of mocked queries in GraphQL update

.changeset/perfect-pigs-heal.md

@@ -0,0 +1,5 @@
+---
+'@shopify/graphql-testing': minor
+---
+
+Added `updateMockWithMerge` to `GraphQLController` to allow a partial update of mocked queries.

packages/graphql-testing/src/graphql-controller.ts

@@ -4,7 +4,7 @@
 import {MockLink, InflightLink} from './links';
 import {Operations} from './operations';
 import {operationNameFromFindOptions} from './utilities';
-import type {GraphQLMock, MockRequest, FindOptions} from './types';
+import type {GraphQLMock, MockGraphQLObject, MockRequest, FindOptions} from './types';
 
 export interface Options {
   cacheOptions?: InMemoryCacheConfig;
@@ -56,6 +56,13 @@
     this.mockLink.updateMock(mock);
   }
 
+  updateWithMerge(mock: MockGraphQLObject) {
+    if (!this.mockLink) {
+      return;
+    }
+    this.mockLink.updateMockWithMerge(mock);
+  }
+
   async resolveAll(options: ResolveAllFindOptions = {}) {
     let requestFilter: ((operation: MockRequest) => boolean) | undefined;
 

packages/graphql-testing/src/links/mocks.ts

@@ -3,7 +3,11 @@ import {ApolloLink, Observable} from '@apollo/client';
 import type {ExecutionResult} from 'graphql';
 import {GraphQLError} from 'graphql';
 
-import type {GraphQLMock, MockGraphQLFunction} from '../types';
+import type {
+  GraphQLMock,
+  MockGraphQLFunction,
+  MockGraphQLObject,
+} from '../types';
 
 export class MockLink extends ApolloLink {
   constructor(private mock: GraphQLMock) {
@@ -14,6 +18,15 @@ export class MockLink extends ApolloLink {
     this.mock = mock;
   }
 
+  updateMockWithMerge(mock: MockGraphQLObject) {
+    if (typeof this.mock === 'function') {
+      throw new Error(
+        "Can't merge a GraphQL function mock with a GraphQL object mock",
+      );
+    }
+    this.mock = {...this.mock, ...mock};
+  }
+
   request(operation: Operation): Observable<any> {
     return new Observable((obs) => {
       const {mock} = this;

packages/graphql-testing/src/tests/e2e.test.tsx

@@ -344,6 +344,82 @@ describe('graphql-testing', () => {
     expect(myComponent).toContainReactText('Garfield2');
   });
 
+  it('allows for merged mock updates after it has been initialized', async () => {
+    const MyComponentWithTwoQueries = () => {
+      const queryResult = useQuery(personQuery, {variables: {id: '1'}});
+      const {data, refetch} = queryResult;
+
+      return (
+        <>
+          <div>{data?.person?.name}</div>{' '}
+          <button onClick={() => refetch()} type="button">
+            Refetch Person
+          </button>
+          <MyComponent id="123" />
+        </>
+      );
+    };
+
+    const mockPetQueryData = {pet: {__typename: 'Cat', name: 'Garfield'}};
+
+    const graphQL = createGraphQL({
+      Pet: mockPetQueryData,
+    });
+
+    const mockPersonQueryData = {
+      person: {__typename: 'Person', name: 'Jon Arbuckle'},
+    };
+
+    graphQL.updateWithMerge({
+      Person: mockPersonQueryData,
+    });
+
+    const myComponent = mount(
+      <ApolloProvider client={graphQL.client}>
+        <MyComponentWithTwoQueries />
+      </ApolloProvider>,
+    );
+
+    graphQL.wrap((resolve) => myComponent.act(resolve));
+    await graphQL.resolveAll();
+
+    expect(myComponent).toContainReactText('Garfield');
+    expect(myComponent).toContainReactText('Jon Arbuckle');
+
+    const newMockPetQueryData = {pet: {__typename: 'Cat', name: 'Garfield2'}};
+    graphQL.updateWithMerge({
+      // Partial update of pet mock
+      Pet: newMockPetQueryData,
+    });
+
+    const request = myComponent
+      .find('button', {children: 'Refetch!'})!
+      .trigger('onClick');
+    await graphQL.resolveAll();
+    await request;
+
+    expect(myComponent).toContainReactText('Garfield2');
+    expect(myComponent).toContainReactText('Jon Arbuckle');
+
+    const newMockPersonQueryData = {
+      person: {__typename: 'Person', name: 'Jon Arbuckle Jr.'},
+    };
+
+    graphQL.updateWithMerge({
+      // Partial update of person mock
+      Person: newMockPersonQueryData,
+    });
+
+    const personRequest = myComponent
+      .find('button', {children: 'Refetch Person'})!
+      .trigger('onClick');
+    await graphQL.resolveAll();
+    await personRequest;
+
+    expect(myComponent).toContainReactText('Garfield2');
+    expect(myComponent).toContainReactText('Jon Arbuckle Jr.');
+  });
+
   it('handles fetchMore', async () => {
     const graphQL = createGraphQL({
       Pets: ({

packages/graphql-testing/src/types.ts

@@ -10,9 +10,12 @@
 export type MockGraphQLFunction = (
   request: GraphQLRequest,
 ) => MockGraphQLResponse;
-export type GraphQLMock =
-  | {[key: string]: MockGraphQLResponse | MockGraphQLFunction}
-  | MockGraphQLFunction;
+
+export type MockGraphQLObject = {
+  [key: string]: MockGraphQLResponse | MockGraphQLFunction;
+};
+
+export type GraphQLMock = MockGraphQLObject | MockGraphQLFunction;
 
 export interface MockRequest {
   operation: Operation;