How can I handle errors in Apollo Client with React?

How can I handle errors in Apollo Client with React?

You can handle errors in Apollo Client by using the onError link or by checking the error property in your query result.

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

Sure! You can create an ApolloLink for error handling like this:

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

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

What about handling errors in a specific query?

In your component, you can check the error property from the useQuery hook:

const { loading, error, data } = useQuery(MY_QUERY);

if (error) return <p>Error: {error.message}</p>;