2.0.2 • Published 2 years ago
react-graphql200 v2.0.2
Getting generic error screens up in GraphQL
This package helps to handle GraphQL errors at the top level of the application rather than handling GraphQL errors at the individual component level.
Getting started
Installing package
npm i react-graphql200
Using package
- Replace default
ApolloProvider
withApolloProviderWithError
- Pass the array of ApolloLink objects to
ApolloProviderWithError
- Pass an error component to
ApolloProviderWithError
which will have access to errors and will be rendered if there will be any errors. Errors will be passed as a prop to theerrorComponent
import { ApolloProviderWithError } from 'react-graphql200';
import { from, InMemoryCache } from '@apollo/client';
const httpLink = new HttpLink({
uri: 'http://localhost:6060/graphql',
});
const link = from([httpLink]);
<ApolloProviderWithError
errorComponent={ErrorScreen}
clientOptions={{
link,
cache: new InMemoryCache(),
}}
>
<App />
</ApolloProviderWithError>;
Example ErrorScreen
import React from 'react';
const ErrorScreen = ({ error, dismissError }) => {
const { graphQLError, networkError, operation } = error;
return (
<div>
{graphQLError ? (
<h1 role="alert">GraphQL Error:{graphQLError.extensions.code}</h1>
) : null}
{networkError ? (
<h1 role="alert">Network Error:{networkError.statusCode}</h1>
) : null}
<button onClick={dismissError}>Dismiss</button>
</div>
);
};
export default ErrorScreen;
Error Object Properties
graphQLError: any GraphQL error will be passed as a graphQLError
networkError: any Network error error will be passed as a networkError
operation: copy of GraphQL opeation object