How do I handle errors in Apollo Client?

How do I handle errors in Apollo Client?

In Apollo Client, you can handle errors using the onError link from the Apollo Link library. This allows you to catch errors globally.

Can you show me an example of using the onError link?

Sure! Here's a basic example:

import { ApolloClient, InMemoryCache, ApolloLink } from '@apollo/client';
import { onError } from '@apollo/client/link/error';

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.forEach(({ message, locations, path }) => {
      console.log(`GraphQL error: ${message}\nLocation: ${locations}\nPath: ${path}`);
    });
  }
  if (networkError) {
    console.log(`Network error: ${networkError}`);
  }
});

const client = new ApolloClient({
  link: ApolloLink.from([errorLink, httpLink]),
  cache: new InMemoryCache(),
});

This will log errors to the console.

What should I do if I want to show a user-friendly message instead of logging?

You can update your UI state to display a user-friendly message. For example, you could use a state management solution to show an error message in your component.