Docs
Launch GraphOS Studio
You're viewing documentation for a previous version of this software. Switch to the latest stable version.

Error handling

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 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:

  • 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 s
  • UI Errors: errors that occur in your component code
  • Errors: internal errors within the core or corresponding libraries

Error policies

Much like fetchPolicy, errorPolicy allows you to control how Errors from the server are sent to your UI code. By default, the error policy treats any GraphQL Errors as network errors and ends the request chain. It doesn't save any data in the cache, and renders your UI with the error prop to be an ApolloError. By changing this policy per request, you can adjust how Errors are managed in the cache and your UI. The possible options for errorPolicy are:

  • none: This is the default policy to match how 1.0 worked. Any Errors are treated the same as network errors and any data is ignored from the response.
  • ignore: Ignore allows you to read any data that is returned alongside Errors, but doesn't save the errors or report them to your UI.
  • all: Using the all policy is the best way to notify your users of potential issues while still showing as much data as possible from your server. It saves both data and errors into the Apollo Cache so your UI can use them.

You can set errorPolicy on each request like so:

const MY_QUERY = gql`
query WillFail {
badField
goodField
}
`;
const ShowingSomeErrors = () => (
<Query query={MY_QUERY} errorPolicy="all">
{({ error, data, loading }) => {
if (loading) return <span>loading...</span>
return (
<div>
<h2>Good: {data.goodField}</h2>
<pre>Bad: {error.graphQLErrors.map(({ message }, i) => (
<span key={i}>{message}</span>
))}
</pre>
</div>
)
}}
</Query>
);

Any errors reported will come under an error prop along side the data returned from the cache or server.

Network Errors

When using , the ability to handle network errors is way more powerful. The best way to do this is to use the apollo-link-error to catch and handle server errors, network errors, and errors. If you would like to combine with other links, see

.

Usage

import { onError } from "apollo-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}`);
});

Options

Error Link takes a function that is called in the event of an error. This function is called with an object containing the following keys:

  • operation: The that errored
  • response: The response from the server
  • graphQLErrors: An array of errors from the endpoint
  • networkError: any error during the link execution or server response

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;
}
})
Previous
Using fragments
Next
Configuring the cache
Edit on GitHubEditForumsDiscord

© 2024 Apollo Graph Inc.

Privacy Policy

Company