Apollo 客户端的全局加载标志

Question

是否有全局 loading 标志可用于 react-apollo 客户端？我有一个“页面包装器”组件，我想在所有子组件收到它们的数据后应用 ui 效果。

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

我可以 quite 轻松 dispatch 每个从 apollo 接收数据的组件的状态变化，但我希望这个 page wrapper 组件不知道它的子组件也不是他们的查询。

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

Answer 1

您可以通过两种方式实现：

一种方法是使用 Apollo 的网络接口middleware/afterware。

另一种方法是包装 Apollo 的网络接口以包含您的自定义逻辑。具体来说，您将包装查询方法。

Answer 2

我刚刚发布了一个为 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);

Apollo 客户端的全局加载标志

Global Loading Flag for Apollo Client

apollo

react-apollo