https://github.com/molindo/react-apollo-network-status
Global handling for loading and error states
https://github.com/molindo/react-apollo-network-status
apollo-client react
Last synced: 5 months ago
JSON representation
Global handling for loading and error states
- Host: GitHub
- URL: https://github.com/molindo/react-apollo-network-status
- Owner: molindo
- License: mit
- Created: 2018-01-11T13:08:18.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2025-10-21T06:16:20.000Z (8 months ago)
- Last Synced: 2025-11-01T06:08:09.405Z (8 months ago)
- Topics: apollo-client, react
- Language: TypeScript
- Homepage:
- Size: 1000 KB
- Stars: 240
- Watchers: 7
- Forks: 13
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-apollo-network-status
> Brings information about the global network status from Apollo into React.
[
](https://www.npmjs.com/package/react-apollo-network-status)
This library helps with implementing global loading indicators like progress bars or adding global error handling, so you don't have to respond to every error in a component that invokes an operation.
## Apollo Client version compatibility
| react-apollo-network-status | Apollo Client |
| ----------------------------|---------------|
| 6 | 4 |
| 5 | 3 |
| 4, 3, 2 | 2 |
| 1 | 1 |
## Usage
```js
import React from 'react';
import ReactDOM from 'react-dom';
import {ApolloClient, InMemoryCache, HttpLink} from '@apollo/client';
import {ApolloProvider} from '@apollo/client/react';
import {createNetworkStatusNotifier} from 'react-apollo-network-status';
const {link, useApolloNetworkStatus} = createNetworkStatusNotifier();
function GlobalLoadingIndicator() {
const status = useApolloNetworkStatus();
if (status.numPendingQueries > 0) {
return
Loading …
;
} else {
return null;
}
}
const client = new ApolloClient({
cache: new InMemoryCache(),
link: link.concat(createHttpLink())
});
const element = (
);
ReactDOM.render(element, document.getElementById('root'));
```
## Returned data
The hook `useApolloNetworkStatus` provides an object with the following properties:
```tsx
type NetworkStatus = {
// The number of queries which are currently in flight.
numPendingQueries: number;
// The number of mutations which are currently in flight.
numPendingMutations: number;
// The latest query error that has occured. This will be reset once the next query starts.
queryError?: OperationError;
// The latest mutation error that has occured. This will be reset once the next mutation starts.
mutationError?: OperationError;
};
type OperationError = {
networkError?: Error | ServerError | ServerParseError;
operation: ApolloLink.Operation;
response?: FormattedExecutionResult;
graphQLErrors?: ReadonlyArray;
};
```
Subscriptions currently don't affect the status returned by `useApolloNetworkStatus`.
Useful applications are for example integrating with [NProgress.js](http://ricostacruz.com/nprogress/) or showing errors with [snackbars from Material UI](http://www.material-ui.com/#/components/snackbar).
## Advanced usage
### Limit handling to specific operations
The default configuration enables an **opt-out** behaviour per operation by setting a context variable:
```js
// Somewhere in a React component
mutate({context: {useApolloNetworkStatus: false}});
```
You can configure an **opt-in** behaviour by specifying an operation whitelist like this:
```js
// Inside the component handling the network events
useApolloNetworkStatus({
shouldHandleOperation: (operation: Operation) =>
operation.getContext().useApolloNetworkStatus === true
});
// Somewhere in a React component
mutate({context: {useApolloNetworkStatus: true}});
```
### Custom state
You can fully control how operations are mapped to state by providing a custom reducer to a separate low-level hook.
```tsx
const {link, useApolloNetworkStatusReducer} = createNetworkStatusNotifier();
const initialState = 0;
function reducer(state: number, action: NetworkStatusAction) {
switch (action.type) {
case ActionTypes.REQUEST:
return state + 1;
case ActionTypes.ERROR:
case ActionTypes.SUCCESS:
case ActionTypes.CANCEL:
return state - 1;
}
}
function GlobalLoadingIndicator() {
const numPendingQueries = useApolloNetworkStatusReducer(reducer, initialState);
return
Pending queries: {numPendingQueries}
;
}
```