Global Loading Flag for Apollo Client

Question

Is there a global loading flag available anywhere for react-apollo client? I have a “page wrapper” component that i’d like to apply ui effects to after all the child components have received their data.

I have set up apollo with redux so have ready access to the store (http://dev.apollodata.com/react/redux.html)

I could quite easily dispatch state changes from each component that receives data from apollo but I'd like this page wrapper component to not have any knowledge of its children nor their queries.

I have investigated using withApollo - http://dev.apollodata.com/react/higher-order-components.html#withApollo - but don't see an api for a global is loading.

Answer 1

I've just released a library that solves this for Apollo 2: react-apollo-network-status.

The gist is:

import React, {Fragment} from 'react';
import ReactDOM from 'react-dom';
import {ApolloClient} from 'apollo-client';
import {createNetworkStatusNotifier} from 'react-apollo-network-status';
import {createHttpLink} from 'apollo-link-http';

const {
  NetworkStatusNotifier,
  link: networkStatusNotifierLink
} = createNetworkStatusNotifier();

const client = new ApolloClient({
  link: networkStatusNotifierLink.concat(createHttpLink())
});

// Render the notifier along with the app. The
// `NetworkStatusNotifier` can be placed anywhere.
const element = (
  <Fragment>
    <NetworkStatusNotifier render={({loading, error}) => (
      <div>
        {loading && <p>Loading …</p>}
        {error && <p>Error: {JSON.stringify(error)}</p>}
      </div>
    )} />
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </Fragment>
);
const node = document.getElementById('root');
ReactDOM.render(element, node);

Answer 2

You can achieve this in two ways:

One way is to use the middleware/afterware of Apollo's network interface.

The other way is to wrap Apollo's network interface to include your custom logic. Specifically you would wrap the query method.