Global Loading Flag for Apollo Client

user_2968327 0
Viewed 3745

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.

react-apollo apollo
2 Answers

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