Backport PR #9793 from release-3.7 branch to main (#9807)

Author: benjamn

CHANGELOG.md

@@ -1,3 +1,10 @@
+## Apollo Client 3.6.7 (2022-06-10)
+
+### Bug Fixes
+
+- Fix regression (introduced in v3.6.0) that caused `BatchHttpLink` to discard pending batched queries on early completion of the underlying `Observable`. <br/>
+  [@benjamn](https://github.com/benjamn) in [#9793](https://github.com/apollographql/apollo-client/pull/9793)
+
 ## Apollo Client 3.6.6 (2022-05-26)
 
 ### Bug Fixes

package-lock.json

@@ -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",

package.json

@@ -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();
             }

src/link/batch/batching.ts

@@ -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');
+    });
   });
 });