react-graphql200

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 with ApolloProviderWithError
• 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 the errorComponent

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