feat: Multipart Subscriptions

.changeset/nervous-tomatoes-act.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Adds support for multipart subscriptions in `HTTPLink`.

config/bundlesize.ts

@@ -3,7 +3,7 @@ import { join } from "path";
 import { gzipSync } from "zlib";
 import bytes from "bytes";
 
-const gzipBundleByteLengthLimit = bytes("32.65KB");
+const gzipBundleByteLengthLimit = bytes("33KB");
 const minFile = join("dist", "apollo-client.min.cjs");
 const minPath = join(__dirname, "..", minFile);
 const gzipByteLen = gzipSync(readFileSync(minPath)).byteLength;

config/jest.config.js

@@ -30,15 +30,14 @@ const react18TestFileIgnoreList = [
   // to avoid running them twice with both react versions
   // since they do not import react
   ignoreTSFiles,
-  // failing hoc tests (8)
+  // failing hoc tests (7)
   'src/react/hoc/__tests__/mutations/queries.test.tsx',
   'src/react/hoc/__tests__/mutations/recycled-queries.test.tsx',
   'src/react/hoc/__tests__/queries/errors.test.tsx',
   'src/react/hoc/__tests__/queries/lifecycle.test.tsx',
   'src/react/hoc/__tests__/queries/loading.test.tsx',
   'src/react/hoc/__tests__/queries/observableQuery.test.tsx',
   'src/react/hoc/__tests__/queries/skip.test.tsx',
-  'src/react/hoc/__tests__/subscriptions/subscriptions.test.tsx',
   // failing components tests (1)
   'src/react/components/__tests__/client/Query.test.tsx',
 ];

src/__tests__/__snapshots__/graphqlSubscriptions.ts.snap

@@ -3,3 +3,7 @@
 exports[`GraphQL Subscriptions should throw an error if the result has errors on it 1`] = `[ApolloError: This is an error]`;
 
 exports[`GraphQL Subscriptions should throw an error if the result has errors on it 2`] = `[ApolloError: This is an error]`;
+
+exports[`GraphQL Subscriptions should throw an error if the result has protocolErrors on it 1`] = `[ApolloError]`;
+
+exports[`GraphQL Subscriptions should throw an error if the result has protocolErrors on it 2`] = `[ApolloError]`;

src/__tests__/graphqlSubscriptions.ts

@@ -261,4 +261,52 @@ describe('GraphQL Subscriptions', () => {
 
     link.simulateResult(results[0]);
   });
+
+  it('should throw an error if the result has protocolErrors on it', () => {
+    const link = mockObservableLink();
+    const queryManager = new QueryManager({
+      link,
+      cache: new InMemoryCache({ addTypename: false }),
+    });
+
+    const obs = queryManager.startGraphQLSubscription(options);
+
+    const promises = [];
+    for (let i = 0; i < 2; i += 1) {
+      promises.push(
+        new Promise<void>((resolve, reject) => {
+          obs.subscribe({
+            next(result) {
+              reject('Should have hit the error block');
+            },
+            error(error) {
+              expect(error).toMatchSnapshot();
+              resolve();
+            },
+          });
+        }),
+      );
+    }
+
+    const errorResult = {
+      result: {
+        data: null,
+        extensions: {
+          protocolErrors: [
+            {
+              message: 'cannot read message from websocket',
+              extensions: [
+                {
+                  code: "WEBSOCKET_MESSAGE_ERROR"
+                }
+              ],
+            } as any,
+          ],
+        }
+      },
+    };
+
+    link.simulateResult(errorResult);
+    return Promise.all(promises);
+  });
 });

src/core/QueryManager.ts

@@ -18,6 +18,7 @@ import {
   getOperationName,
   hasClientExports,
   graphQLResultHasError,
+  graphQLResultHasProtocolError,
   getGraphQLErrorsFromResult,
   removeConnectionDirectiveFromDocument,
   canUseWeakMap,
@@ -942,6 +943,12 @@ export class QueryManager<TStore> {
           });
         }
 
+        if (graphQLResultHasProtocolError(result)) {
+          throw new ApolloError({
+            protocolErrors: result.extensions?.protocolErrors
+          })
+        }
+
         return result;
       });
 

src/errors/index.ts

@@ -1,6 +1,6 @@
 import '../utilities/globals';
 
-import { GraphQLError } from 'graphql';
+import { GraphQLError, GraphQLErrorExtensions } from 'graphql';
 
 import { isNonEmptyArray } from '../utilities';
 import { ServerParseError } from '../link/http';
@@ -45,6 +45,10 @@ export class ApolloError extends Error {
   public name: string;
   public message: string;
   public graphQLErrors: GraphQLErrors;
+  public protocolErrors: ReadonlyArray<{
+    message: string;
+    extensions?: GraphQLErrorExtensions;
+  }>;
   public clientErrors: ReadonlyArray<Error>;
   public networkError: Error | ServerParseError | ServerError | null;
 
@@ -58,20 +62,26 @@ export class ApolloError extends Error {
   // value or the constructed error will be meaningless.
   constructor({
     graphQLErrors,
+    protocolErrors,
     clientErrors,
     networkError,
     errorMessage,
     extraInfo,
   }: {
     graphQLErrors?: ReadonlyArray<GraphQLError>;
+    protocolErrors?: ReadonlyArray<{
+      message: string;
+      extensions?: GraphQLErrorExtensions;
+    }>;
     clientErrors?: ReadonlyArray<Error>;
     networkError?: Error | ServerParseError | ServerError | null;
     errorMessage?: string;
     extraInfo?: any;
-  }) {
+    }) {
     super(errorMessage);
     this.name = 'ApolloError';
     this.graphQLErrors = graphQLErrors || [];
+    this.protocolErrors = protocolErrors || [];
     this.clientErrors = clientErrors || [];
     this.networkError = networkError || null;
     this.message = errorMessage || generateErrorMessage(this);

src/link/core/types.ts

@@ -21,10 +21,7 @@ export interface ExecutionPatchInitialResult<
   extensions?: TExtensions;
 }
 
-export interface IncrementalPayload<
-  TData,
-  TExtensions,
-> {
+export interface IncrementalPayload<TData, TExtensions> {
   // data and path must both be present
   // https://github.com/graphql/graphql-spec/pull/742/files#diff-98d0cd153b72b63c417ad4238e8cc0d3385691ccbde7f7674bc0d2a718b896ecR288-R293
   data: TData | null;
@@ -48,6 +45,19 @@ export interface ExecutionPatchIncrementalResult<
   extensions?: never;
 }
 
+export interface ApolloPayloadResult<
+  TData = Record<string, any>,
+  TExtensions = Record<string, any>
+> {
+  payload: SingleExecutionResult | ExecutionPatchResult;
+  // Transport layer errors (as distinct from GraphQL or NetworkErrors),
+  // these are fatal errors that will include done: true.
+  errors?: ReadonlyArray<Error | string>;
+  // Done can be true or false and is present as `done: true` on the final
+  // chunk, or when fatal errors occur.
+  done?: boolean;
+}
+
 export type ExecutionPatchResult<
   TData = Record<string, any>,
   TExtensions = Record<string, any>