diff --git a/package-lock.json b/package-lock.json index 35216c46ccd..cf8fd34610e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@apollo/client", - "version": "3.7.0-beta.1", + "version": "3.7.0-beta.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@apollo/client", - "version": "3.7.0-beta.1", + "version": "3.7.0-beta.2", "license": "MIT", "dependencies": { "@graphql-typed-document-node/core": "^3.1.1", @@ -28,6 +28,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", @@ -1169,6 +1170,19 @@ } } }, + "node_modules/@testing-library/user-event": { + "version": "14.2.0", + "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.2.0.tgz", + "integrity": "sha512-+hIlG4nJS6ivZrKnOP7OGsDu9Fxmryj9vCl8x0ZINtTJcCHs2zLsYif5GzuRiBF2ck5GZG2aQr7Msg+EHlnYVQ==", + "dev": true, + "engines": { + "node": ">=12", + "npm": ">=6" + }, + "peerDependencies": { + "@testing-library/dom": ">=7.21.4" + } + }, "node_modules/@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -7296,6 +7310,13 @@ "react-error-boundary": "^3.1.0" } }, + "@testing-library/user-event": { + "version": "14.2.0", + "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.2.0.tgz", + "integrity": "sha512-+hIlG4nJS6ivZrKnOP7OGsDu9Fxmryj9vCl8x0ZINtTJcCHs2zLsYif5GzuRiBF2ck5GZG2aQr7Msg+EHlnYVQ==", + "dev": true, + "requires": {} + }, "@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", diff --git a/package.json b/package.json index d8e5b2c4437..f2a2fcd1df6 100644 --- 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 index 549df9c9728..296f9ecaa30 100644 --- 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 index 0b815c6c7c1..e60af5e94a7 100644 --- 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 <> + + {items.map((c: any) => ( +