apollo - Apollo 客户端的全局加载标志

Question

有没有全局loading react-apollo 客户端在任何地方都可以使用标志吗？我有一个“页面包装器”组件，我想在所有子组件都收到它们的数据后应用 ui 效果。

我已经使用 redux 设置了 apollo，因此可以随时访问商店 (http://dev.apollodata.com/react/redux.html)

我可以很容易 dispatch从 apollo 接收数据的每个组件的状态都会发生变化，但我想要这个 page wrapper组件不了解其子级及其查询。

我使用 withApollo 进行了调查- http://dev.apollodata.com/react/higher-order-components.html#withApollo -
但看不到全局 is loading 的 api .

Answer 1

我刚刚发布了一个为 Apollo 2 解决这个问题的库:react-apollo-network-status .

要点是:

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