Error Link

We recommend reading Apollo Link overview before learning about individual links.

Use the onError link to perform custom logic when a GraphQL or network error occurs. You pass this link a function that's executed if an operation returns one or more errors:

import { onError } from "@apollo/client/link/error";

// Log any GraphQL errors or network error that occurred
const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.forEach(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
      )
    );
  if (networkError) console.log(`[Network error]: ${networkError}`);
});

This function is called after the GraphQL operation completes and execution is moving back up your link chain. The function should not return a value unless you want to retry the operation.

Options

The function you provide the onError link is passed an object with the following fields:

Error categorization

An error is passed as a networkError if a link further down the chain called the error callback on the observable. In most cases, graphQLErrors is the errors field of the result from the last next call.

A networkError can contain additional fields, such as a GraphQL object in the case of a failing HTTP status code. In this situation, graphQLErrors is an alias for networkError.result.errors if the property exists.

Ignoring errors

If you want to conditionally ignore errors, you can set response.errors = null; within the error handler:

onError(({ response, operation }) => {
  if (operation.operationName === "IgnoreErrorsQuery") {
    response.errors = null;
  }
});