# react-graphql200

> This package helps to handle GraphQL errors at the top level of the application rather than handling GraphQL errors at the individual component level.

Latest version **2.0.2** (published 2022-07-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-graphql200
pnpm add react-graphql200
yarn add react-graphql200
bun add react-graphql200
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2022-07-05 |
| First published | 2021-08-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 29.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Manoj Singh |
| Maintainers | ext.manoj.s |
| Keywords | ts, react-graphql, graphql-error |

## Links

- npm: https://www.npmjs.com/package/react-graphql200
- npm.io page: https://npm.io/package/react-graphql200

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 2.0.2 (latest) — 2022-07-05
- 2.0.1 — 2022-06-30
- 2.0.0 — 2022-06-13
- 1.0.1 — 2021-12-22
- 1.0.0 — 2021-12-22
- 0.1.8 — 2021-08-23
- 0.1.7 — 2021-08-23
- 0.1.6 — 2021-08-23
- 0.1.5 — 2021-08-23
- 0.1.4 — 2021-08-23
- 0.1.3 — 2021-08-22
- 0.1.2 — 2021-08-22
- 0.1.1 — 2021-08-22
- 0.1.0 — 2021-08-22

## README

# 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`

```js
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

```js
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
```

---
_Source: https://npm.io/package/react-graphql200 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._