Change usages of the GraphQLError type to GraphQLFormattedError.

.changeset/slimy-berries-yawn.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+post-process errors received from responses into GraphQLError instances

src/core/QueryInfo.ts

@@ -1,4 +1,4 @@
-import type { DocumentNode, GraphQLError } from "graphql";
+import type { DocumentNode, GraphQLFormattedError } from "graphql";
 import { equal } from "@wry/equality";
 
 import type { Cache, ApolloCache } from "../cache/index.js";
@@ -82,7 +82,7 @@ export class QueryInfo {
   variables?: Record<string, any>;
   networkStatus?: NetworkStatus;
   networkError?: Error | null;
-  graphQLErrors?: ReadonlyArray<GraphQLError>;
+  graphQLErrors?: ReadonlyArray<GraphQLFormattedError>;
   stopped = false;
 
   private cache: ApolloCache<any>;

src/core/QueryManager.ts

@@ -42,6 +42,7 @@ import {
   ApolloError,
   isApolloError,
   graphQLResultHasProtocolErrors,
+  reviveGraphQLError,
 } from "../errors/index.js";
 import type {
   QueryOptions,
@@ -1210,7 +1211,7 @@ export class QueryManager<TStore> {
         };
 
         if (hasErrors && options.errorPolicy !== "ignore") {
-          aqr.errors = graphQLErrors;
+          aqr.errors = graphQLErrors.map(reviveGraphQLError);
           aqr.networkStatus = NetworkStatus.error;
         }
 

src/errors/__tests__/ApolloError.ts

@@ -1,5 +1,5 @@
 import { ApolloError } from "..";
-import { GraphQLError } from "graphql";
+import { ExecutableDefinitionNode, GraphQLError, parse, Source } from "graphql";
 
 describe("ApolloError", () => {
   it("should construct itself correctly", () => {
@@ -107,4 +107,38 @@ describe("ApolloError", () => {
     });
     expect(apolloError.stack).toBeDefined();
   });
+
+  it("will revive `GraphQLError` instances from `graphQLErrors`", () => {
+    const source = new Source(`
+      {
+        field
+      }
+    `);
+    const ast = parse(source);
+    const operationNode = ast.definitions[0] as ExecutableDefinitionNode;
+    const fieldNode = operationNode.selectionSet.selections[0];
+    const original = new GraphQLError("msg" /* message */, {
+      nodes: [fieldNode],
+      source,
+      positions: [1, 2, 3],
+      path: ["a", "b", "c"],
+      originalError: new Error("test"),
+      extensions: { foo: "bar" },
+    });
+
+    const apolloError = new ApolloError({
+      graphQLErrors: [JSON.parse(JSON.stringify(original))],
+    });
+    const graphQLError = apolloError.graphQLErrors[0];
+
+    console.log({
+      graphQLError,
+      original,
+      serialized: JSON.stringify(original),
+    });
+
+    expect(graphQLError).toBeInstanceOf(GraphQLError);
+    // test equality of enumberable fields. non-enumerable fields will differ
+    expect({ ...graphQLError }).toStrictEqual({ ...original });
+  });
 });

src/errors/index.ts

@@ -1,6 +1,7 @@
 import "../utilities/globals/index.js";
 
-import type { GraphQLError, GraphQLErrorExtensions } from "graphql";
+import type { GraphQLErrorExtensions, GraphQLFormattedError } from "graphql";
+import { GraphQLError } from "graphql";
 
 import { isNonNullObject } from "../utilities/index.js";
 import type { ServerParseError } from "../link/http/index.js";
@@ -17,7 +18,7 @@ type FetchResultWithSymbolExtensions<T> = FetchResult<T> & {
 };
 
 export interface ApolloErrorOptions {
-  graphQLErrors?: ReadonlyArray<GraphQLError>;
+  graphQLErrors?: ReadonlyArray<GraphQLFormattedError>;
   protocolErrors?: ReadonlyArray<{
     message: string;
     extensions?: GraphQLErrorExtensions[];
@@ -74,7 +75,7 @@ export type NetworkError = Error | ServerParseError | ServerError | null;
 export class ApolloError extends Error {
   public name: string;
   public message: string;
-  public graphQLErrors: GraphQLErrors;
+  public graphQLErrors: GraphQLError[];
   public protocolErrors: ReadonlyArray<{
     message: string;
     extensions?: GraphQLErrorExtensions[];
@@ -111,7 +112,7 @@ export class ApolloError extends Error {
   }: ApolloErrorOptions) {
     super(errorMessage);
     this.name = "ApolloError";
-    this.graphQLErrors = graphQLErrors || [];
+    this.graphQLErrors = (graphQLErrors || []).map(reviveGraphQLError);
     this.protocolErrors = protocolErrors || [];
     this.clientErrors = clientErrors || [];
     this.networkError = networkError || null;
@@ -120,7 +121,7 @@ export class ApolloError extends Error {
     this.cause =
       [
         networkError,
-        ...(graphQLErrors || []),
+        ...(this.graphQLErrors || []),
         ...(protocolErrors || []),
         ...(clientErrors || []),
       ].find((e) => !!e) || null;
@@ -130,3 +131,25 @@ export class ApolloError extends Error {
     (this as any).__proto__ = ApolloError.prototype;
   }
 }
+
+/**
+ * Revives a GraphQL error that has been received over the network.
+ * Some fields of GraphQL errors, e.g. `extensions`, are not mandatory in the
+ * spec, but they are not optional in the `GraphQLError` type.
+ * This function ensures that all errors are instances of the `GraphQLError` class.
+ */
+export function reviveGraphQLError(error: GraphQLFormattedError): GraphQLError {
+  return error instanceof GraphQLError ? error : (
+      Object.assign(
+        new GraphQLError(
+          error.message,
+          // This will pass `message` into the `options` parameter.
+          // The constructor does not expect that, but it will ignore it and we
+          // don't need to destructure `error`, saving some bundle size.
+          error
+        ),
+        //
+        { locations: error.locations }
+      )
+    );
+}

src/link/core/types.ts

@@ -1,4 +1,4 @@
-import type { ExecutionResult, GraphQLError } from "graphql";
+import type { GraphQLError, GraphQLFormattedError } from "graphql";
 import type { DocumentNode } from "graphql";
 import type { DefaultContext } from "../../core/index.js";
 export type { DocumentNode };
@@ -91,10 +91,12 @@ export interface SingleExecutionResult<
   TData = Record<string, any>,
   TContext = DefaultContext,
   TExtensions = Record<string, any>,
-> extends ExecutionResult<TData, TExtensions> {
+> {
   // data might be undefined if errorPolicy was set to 'ignore'
   data?: TData | null;
   context?: TContext;
+  errors?: ReadonlyArray<GraphQLFormattedError>;
+  extensions?: TExtensions;
 }
 
 export type FetchResult<

src/link/error/index.ts

@@ -1,12 +1,12 @@
-import type { ExecutionResult } from "graphql";
+import type { ExecutionResult, GraphQLFormattedError } from "graphql";
 
-import type { NetworkError, GraphQLErrors } from "../../errors/index.js";
+import type { NetworkError } from "../../errors/index.js";
 import { Observable } from "../../utilities/index.js";
 import type { Operation, FetchResult, NextLink } from "../core/index.js";
 import { ApolloLink } from "../core/index.js";
 
 export interface ErrorResponse {
-  graphQLErrors?: GraphQLErrors;
+  graphQLErrors?: ReadonlyArray<GraphQLFormattedError>;
   networkError?: NetworkError;
   response?: ExecutionResult;
   operation: Operation;
@@ -38,7 +38,7 @@
             if (result.errors) {
               retriedResult = errorHandler({
                 graphQLErrors: result.errors,
                 response: result,
                 operation,
                 forward,
               });

src/link/persisted-queries/index.ts

@@ -1,7 +1,12 @@
 import { invariant } from "../../utilities/globals/index.js";
 
 import { print } from "../../utilities/index.js";
-import type { DocumentNode, ExecutionResult, GraphQLError } from "graphql";
+import type {
+  DocumentNode,
+  ExecutionResult,
+  GraphQLError,
+  GraphQLFormattedError,
+} from "graphql";
 
 import type { Operation } from "../core/index.js";
 import { ApolloLink } from "../core/index.js";
@@ -21,7 +26,7 @@ import {
 export const VERSION = 1;
 
 export interface ErrorResponse {
-  graphQLErrors?: readonly GraphQLError[];
+  graphQLErrors?: ReadonlyArray<GraphQLFormattedError>;
   networkError?: NetworkError;
   response?: ExecutionResult;
   operation: Operation;
@@ -59,7 +64,10 @@ export namespace PersistedQueryLink {
 }
 
 function processErrors(
-  graphQLErrors: GraphQLError[] | readonly GraphQLError[] | undefined
+  graphQLErrors:
+    | GraphQLFormattedError[]
+    | ReadonlyArray<GraphQLFormattedError>
+    | undefined
 ): ErrorMeta {
   const byMessage = Object.create(null),
     byCode = Object.create(null);
@@ -180,7 +188,7 @@ export const createPersistedQueryLink = (
           if (!retried && ((response && response.errors) || networkError)) {
             retried = true;
 
-            const graphQLErrors: GraphQLError[] = [];
+            const graphQLErrors: GraphQLFormattedError[] = [];
 
             const responseErrors = response && response.errors;
             if (isNonEmptyArray(responseErrors)) {