Adds @defer support (#10018)

Co-authored-by: Ben Newman <ben@apollographql.com>

.gitignore

@@ -14,6 +14,9 @@ pids
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
 
+# Ignore Wallaby.js configuration file
+wallaby.js
+
 # Coverage directory used by tools like istanbul
 coverage
 
@@ -61,4 +64,7 @@ junit.xml
 .rpt2_cache
 
 # Local Netlify folder
-.netlify
+.netlify
+
+# Ignore generated test report output
+reports

.vscode/settings.json

@@ -4,7 +4,7 @@
   "editor.rulers": [80],
   "files.trimTrailingWhitespace": true,
   "files.insertFinalNewline": true,
-  "typescript.tsdk": "../node_modules/typescript/lib",
+  "typescript.tsdk": "node_modules/typescript/lib",
   "cSpell.enableFiletypes": [
     "mdx"
   ]

CHANGELOG.md

@@ -13,6 +13,11 @@
 - Delay calling `onCompleted` and `onError` callbacks passed to `useQuery` using `Promise.resolve().then(() => ...)` to fix issue [#9794](https://github.com/apollographql/apollo-client/pull/9794). <br/>
   [@dylanwulf](https://github.com/dylanwulf) in [#9823](https://github.com/apollographql/apollo-client/pull/9823)
 
+### Potentially disruptive
+
+- The optional `subscribeAndCount` testing utility exported from `@apollo/client/testing/core` now takes a single generic `TResult` type parameter, instead of `TData`. This type will typically be inferred from the `observable` argument type, but if you have any explicit calls to `subscribeAndCount<TData>(...)` in your own codebase, you may need to adjust those calls accordingly. <br/>
+  [@benjamn](https://github.com/benjamn) in [#9718](https://github.com/apollographql/apollo-client/pull/9718)
+
 ## Apollo Client 3.6.9 (2022-06-21)
 
 ### Bug Fixes

package.json

@@ -56,7 +56,7 @@
     {
       "name": "apollo-client",
       "path": "./dist/apollo-client.min.cjs",
-      "maxSize": "29.95kB"
+      "maxSize": "31.4kB"
     }
   ],
   "engines": {
@@ -88,6 +88,7 @@
     "hoist-non-react-statics": "^3.3.2",
     "optimism": "^0.16.1",
     "prop-types": "^15.7.2",
+    "response-iterator": "^0.2.6",
     "symbol-observable": "^4.0.0",
     "ts-invariant": "^0.10.3",
     "tslib": "^2.3.0",
@@ -107,10 +108,12 @@
     "@types/jest": "27.5.2",
     "@types/lodash": "4.14.182",
     "@types/node": "16.11.41",
+    "@types/node-fetch": "2.6.2",
     "@types/react": "17.0.47",
     "@types/react-dom": "17.0.17",
-    "@types/use-sync-external-store": "^0.0.3",
+    "@types/use-sync-external-store": "0.0.3",
     "acorn": "8.7.1",
+    "blob-polyfill": "7.0.20220408",
     "bundlesize": "0.18.1",
     "cross-fetch": "3.1.5",
     "crypto-hash": "1.3.0",
@@ -136,6 +139,7 @@
     "ts-node": "10.8.1",
     "typescript": "4.6.4",
     "wait-for-observables": "1.0.3",
+    "web-streams-polyfill": "3.2.1",
     "whatwg-fetch": "3.6.2"
   },
   "publishConfig": {

src/__tests__/__snapshots__/exports.ts.snap

@@ -350,6 +350,7 @@ Array [
   "argumentsObjectFromField",
   "asyncMap",
   "buildQueryFromSelectionSet",
+  "canUseAsyncIteratorSymbol",
   "canUseDOM",
   "canUseLayoutEffect",
   "canUseSymbol",

src/core/ObservableQuery.ts

@@ -482,7 +482,7 @@ Did you mean to call refetch(variables) instead of refetch({ variables })?`);
         },
       });
 
-      return fetchMoreResult as ApolloQueryResult<TFetchData>;
+      return fetchMoreResult;
 
     }).finally(() => {
       // In case the cache writes above did not generate a broadcast

src/core/QueryInfo.ts

@@ -2,6 +2,7 @@ import { DocumentNode, GraphQLError } from 'graphql';
 import { equal } from "@wry/equality";
 
 import { Cache, ApolloCache } from '../cache';
+import { DeepMerger } from "../utilities"
 import { WatchQueryOptions, ErrorPolicy } from './watchQueryOptions';
 import { ObservableQuery, reobserveCacheFirst } from './ObservableQuery';
 import { QueryListener } from './types';
@@ -153,7 +154,6 @@ export class QueryInfo {
 
   reset() {
     cancelNotifyTimeout(this);
-    this.lastDiff = void 0;
     this.dirty = false;
   }
 
@@ -362,12 +362,35 @@ export class QueryInfo {
       | "errorPolicy">,
     cacheWriteBehavior: CacheWriteBehavior,
   ) {
-    this.graphQLErrors = isNonEmptyArray(result.errors) ? result.errors : [];
+    const graphQLErrors = isNonEmptyArray(result.errors)
+      ? result.errors.slice(0)
+      : [];
 
     // Cancel the pending notify timeout (if it exists) to prevent extraneous network
     // requests. To allow future notify timeouts, diff and dirty are reset as well.
     this.reset();
 
+    if ('incremental' in result && isNonEmptyArray(result.incremental)) {
+      let mergedData = this.getDiff().result;
+      const merger = new DeepMerger();
+      result.incremental.forEach(({ data, path, errors }) => {
+        for (let i = path.length - 1; i >= 0; --i) {
+          const key = path[i];
+          const isNumericKey = !isNaN(+key);
+          const parent: Record<string | number, any> = isNumericKey ? [] : {};
+          parent[key] = data;
+          data = parent as typeof data;
+        }
+        if (errors) {
+          graphQLErrors.push(...errors);
+        }
+        mergedData = merger.merge(mergedData, data);
+      });
+      result.data = mergedData;
+    }
+
+    this.graphQLErrors = graphQLErrors;
+
     if (options.fetchPolicy === 'no-cache') {
       this.updateLastDiff(
         { result: result.data, complete: true },

src/core/QueryManager.ts

@@ -6,6 +6,7 @@ type OperationTypeNode = any;
 import { equal } from '@wry/equality';
 
 import { ApolloLink, execute, FetchResult } from '../link/core';
+import { isExecutionPatchIncrementalResult } from '../utilities/common/incrementalResult';
 import { Cache, ApolloCache, canonicalStringify } from '../cache';
 
 import {
@@ -434,7 +435,7 @@ export class QueryManager<TStore> {
                 returnPartialData: true,
               });
 
-              if (diff.complete) {
+              if (diff.complete && !(isExecutionPatchIncrementalResult(result))) {
                 result = { ...result, data: diff.result };
               }
             }
@@ -1047,15 +1048,27 @@ export class QueryManager<TStore> {
       ),
 
       result => {
-        const hasErrors = isNonEmptyArray(result.errors);
+        const graphQLErrors = isNonEmptyArray(result.errors)
+          ? result.errors.slice(0)
+          : [];
+
+        if ('incremental' in result && isNonEmptyArray(result.incremental)) {
+          result.incremental.forEach(incrementalResult => {
+            if (incrementalResult.errors) {
+              graphQLErrors.push(...incrementalResult.errors);
+            }
+          });
+        }
+
+        const hasErrors = isNonEmptyArray(graphQLErrors);
 
         // If we interrupted this request by calling getResultsFromLink again
         // with the same QueryInfo object, we ignore the old results.
         if (requestId >= queryInfo.lastRequestId) {
           if (hasErrors && options.errorPolicy === "none") {
             // Throwing here effectively calls observer.error.
             throw queryInfo.markError(new ApolloError({
-              graphQLErrors: result.errors,
+              graphQLErrors,
             }));
           }
           queryInfo.markResult(result, options, cacheWriteBehavior);
@@ -1069,7 +1082,7 @@ export class QueryManager<TStore> {
         };
 
         if (hasErrors && options.errorPolicy !== "ignore") {
-          aqr.errors = result.errors;
+          aqr.errors = graphQLErrors;
           aqr.networkStatus = NetworkStatus.error;
         }