Merge pull request #9793 from apollographql/issue-9773-unbreak-BatchH…

…ttpLink Fix `BatchHttpLink` regression that silently discarded some pending queries
apollographql · Jun 7, 2022 · ba25a38 · ba25a38
2 parents b4b2eef + 1766c8f
commit ba25a38
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@apollo/client",
-  "version": "3.7.0-beta.1",
+  "version": "3.7.0-beta.2",
   "description": "A fully-featured caching GraphQL client.",
   "private": true,
   "keywords": [
@@ -56,7 +56,7 @@
     {
       "name": "apollo-client",
       "path": "./dist/apollo-client.min.cjs",
-      "maxSize": "29.8kB"
+      "maxSize": "29.9kB"
     }
   ],
   "engines": {
@@ -99,6 +99,7 @@
     "@rollup/plugin-node-resolve": "11.2.1",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "8.0.0",
+    "@testing-library/user-event": "^14.2.0",
     "@types/fast-json-stable-stringify": "2.0.0",
     "@types/fetch-mock": "7.3.5",
     "@types/glob": "7.2.0",

diff --git a/src/link/batch/batching.ts b/src/link/batch/batching.ts
@@ -119,8 +119,7 @@ export class OperationBatcher {
               requestCopy.subscribers.size < 1) {
             // If this is last request from queue, remove queue entirely
             if (batch.delete(requestCopy) && batch.size < 1) {
-              clearTimeout(this.scheduledBatchTimer);
-              this.batchesByKey.delete(key);
+              this.consumeQueue(key);
               // If queue was in flight, cancel it
               batch.subscription?.unsubscribe();
             }

diff --git a/src/react/hooks/__tests__/useMutation.test.tsx b/src/react/hooks/__tests__/useMutation.test.tsx
@@ -2,14 +2,18 @@ import React, { useEffect } from 'react';
 import { GraphQLError } from 'graphql';
 import gql from 'graphql-tag';
 import { act } from 'react-dom/test-utils';
-import { render, waitFor } from '@testing-library/react';
+import { render, waitFor, screen } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
+import userEvent from '@testing-library/user-event';
+import fetchMock from "fetch-mock";
+
 import { ApolloClient, ApolloLink, ApolloQueryResult, Cache, NetworkStatus, Observable, ObservableQuery, TypedDocumentNode } from '../../../core';
 import { InMemoryCache } from '../../../cache';
 import { itAsync, MockedProvider, mockSingleLink, subscribeAndCount } from '../../../testing';
 import { ApolloProvider } from '../../context';
 import { useQuery } from '../useQuery';
 import { useMutation } from '../useMutation';
+import { BatchHttpLink } from '../../../link/batch-http';
 
 describe('useMutation Hook', () => {
   interface Todo {
@@ -2075,5 +2079,74 @@ describe('useMutation Hook', () => {
       expect(result.current.mutation[1].loading).toBe(false);
       expect(result.current.mutation[1].called).toBe(true);
     });
+
+    it("refetchQueries should work with BatchHttpLink", async () => {
+      const MUTATION_1 = gql`
+        mutation DoSomething {
+          doSomething {
+            message
+          }
+        }
+      `;
+
+      const QUERY_1 = gql`
+        query Items {
+          items {
+            id
+          }
+        }
+      `;
+
+      fetchMock.restore();
+
+      const responseBodies = [
+        { data: { items: [{ id: 1 }, { id: 2 }] }},
+        { data: { doSomething: { message: 'success' }}},
+        { data: { items: [{ id: 1 }, { id: 2 }, { id: 3 }] }},
+      ];
+
+      fetchMock.post("/graphql", (url, opts) => new Promise(resolve => {
+        resolve({
+          body: responseBodies.shift(),
+        });
+      }));
+
+      const Test = () => {
+        const { data } = useQuery(QUERY_1);
+        const [mutate] = useMutation(MUTATION_1, {
+          awaitRefetchQueries: true,
+          refetchQueries: [QUERY_1],
+        });
+
+        const { items = [] } = data || {};
+
+        return <>
+          <button onClick={() => {
+            return mutate();
+          }} type="button">
+            mutate
+          </button>
+          {items.map((c: any) => (
+            <div key={c.id}>item {c.id}</div>
+          ))}
+        </>;
+      };
+
+      const client = new ApolloClient({
+        link: new BatchHttpLink({
+          uri: '/graphql',
+          batchMax: 10,
+        }),
+        cache: new InMemoryCache(),
+      });
+
+      render(<ApolloProvider client={client}><Test /></ApolloProvider>);
+
+      await screen.findByText('item 1');
+
+      userEvent.click(screen.getByRole('button', { name: /mutate/i }));
+
+      await screen.findByText('item 3');
+    });
   });
 });