Global download flag for Apollo client

Question

Is there a global flag loadingavailable anywhere for the response-apollo client? I have a page wrapper component for which id likes to apply ui effects after all child components have received their data.

I installed apollo with a shorthand to have access to the repository ( http://dev.apollodata.com/react/redux.html )

I could easily dispatchchange the state of each component receiving data from apollo, but I would like this component page wrappernot to know about its children and their requests.

I researched with withApollo- http://dev.apollodata.com/react/higher-order-components.html#withApollo - but don't see the api for the global one is loading.

Answer 1

You can achieve this in two ways:

One way is to use Apollo middleware / aftereffect.

Another way is to wrap the Apollo network interface to enable your user logic. In particular, you would have wrapped a request method.

Answer 2

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

The bottom line is this:

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);