Neologistic Paraphasic Mumbling
    Wondering what’s next for npm?Check out our public roadmap! »

    react-apollo-network-status
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.1 • Public • Published

    react-apollo-network-status

    Brings information about the global network status from Apollo into React.

    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.

    Usage

    import React from 'react';
    import ReactDOM from 'react-dom';
    import {ApolloClient, InMemoryCache, createHttpLink, ApolloProvider} from '@apollo/client';
    import {createNetworkStatusNotifier} from 'react-apollo-network-status';
     
    const {link, useApolloNetworkStatus} = createNetworkStatusNotifier();
     
    function GlobalLoadingIndicator() {
      const status = useApolloNetworkStatus();
     
      if (status.numPendingQueries > 0) {
        return <p>Loading …</p>;
      } else {
        return null;
      }
    }
     
    const client = new ApolloClient({
      cache: new InMemoryCache(),
      link: link.concat(createHttpLink())
    });
     
    const element = (
      <ApolloProvider client={client}>
        <GlobalLoadingIndicator />
        <App />
      </ApolloProvider>
    );
    ReactDOM.render(element, document.getElementById('root'));

    Note: The current version of this library supports the latest @apollo-client package. If you're using an older version of React Apollo and don't want to upgrade, you can use an older version of this library (see changelog).

    Returned data

    The hook useApolloNetworkStatus provides an object with the following properties:

    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?: Operation;
      response?: ExecutionResult;
      graphQLErrors?: ReadonlyArray<GraphQLError>;
    };

    Subscriptions currently don't affect the status returned by useApolloNetworkStatus.

    Useful applications are for example integrating with NProgress.js or showing errors with snackbars from Material UI.

    Advanced usage

    Limit handling to specific operations

    The default configuration enables an opt-out behaviour per operation by setting a context variable:

    // Somewhere in a React component
    mutate({context: {useApolloNetworkStatus: false}});

    You can configure an opt-in behaviour by specifying an operation whitelist like this:

    // 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.

    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 <p>Pending queries: {numPendingQueries}</p>;
    }

    Keywords

    none

    Install

    npm i react-apollo-network-status

    DownloadsWeekly Downloads

    5,319

    Version

    5.0.1

    License

    MIT

    Unpacked Size

    35 kB

    Total Files

    25

    Last publish

    Collaborators

    • avatar