Monitor apollo client network requests globally

apollo.js

import { isNetworkRequestInFlight } from 'apollo-client/core/networkStatus';

/**
 * Hooking into the onBroadcast function to save the inFlight data point in the client state
 */
apolloClient.queryManager.onBroadcast = () => {
  const { queryManager: { queryStore: { store } } } = apolloClient;
  const queries = Object.values(store);
  // if we can find a way to escape early that will be better, but regular for loops don't sit well with eslint
  const inFlight = queries.reduce(
    (final, val) => final || isNetworkRequestInFlight(val.networkStatus),
    false,
  );
  cache.writeData({ data: { inFlight } });
};

localState.gql

extend type Query {
  inFlight: Boolean
}