Question

对于react-apollo客户端，是否有可用的全局loading标志？我有一个“页面包装器”组件，我想在所有子组件都收到他们的数据后应用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网络接口的中间件/后续软件。

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

Answer 2

我刚刚发布了一个解决这个问题的库，用于解析阿波罗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客户端的全局加载标志

2 个答案: