Handling errors with Apollo

Any application, from simple to complex, can have its fair share of errors. It is important to handle these errors and when possible, report these errors back to your users for information. Using GraphQL brings a new set of possible errors from the actual GraphQL response itself. With that in mind, here are a few different types of errors:

• GraphQL Errors: errors in the GraphQL results that can appear alongside successful data
• Server Errors: server internal errors that prevent a successful response from being formed
• Transaction Errors: errors inside transaction actions like update on mutations
• UI Errors: errors that occur in your component code
• Apollo Client Errors: internal errors within the core or corresponding libraries

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

const link = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
      ),
    );

  if (networkError) console.log(`[Network error]: ${networkError}`);
});