Apollo客户端的全局加载标志

Question

loadingreact-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 - 但是没有看到全局的api is loading.

Answer 1

我刚刚发布了一个库来解决 Apollo 2 的这个问题：react-apollo-network-status。

\n\n

要点是：

\n\n

import React, {Fragment} from \'react\';\nimport ReactDOM from \'react-dom\';\nimport {ApolloClient} from \'apollo-client\';\nimport {createNetworkStatusNotifier} from \'react-apollo-network-status\';\nimport {createHttpLink} from \'apollo-link-http\';\n\nconst {\n  NetworkStatusNotifier,\n  link: networkStatusNotifierLink\n} = createNetworkStatusNotifier();\n\nconst client = new ApolloClient({\n  link: networkStatusNotifierLink.concat(createHttpLink())\n});\n\n// Render the notifier along with the app. The\n// `NetworkStatusNotifier` can be placed anywhere.\nconst element = (\n  <Fragment>\n    <NetworkStatusNotifier render={({loading, error}) => (\n      <div>\n        {loading && <p>Loading \xe2\x80\xa6</p>}\n        {error && <p>Error: {JSON.stringify(error)}</p>}\n      </div>\n    )} />\n    <ApolloProvider client={client}>\n      <App />\n    </ApolloProvider>\n  </Fragment>\n);\nconst node = document.getElementById(\'root\');\nReactDOM.render(element, node);\n

\n

Answer 2

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

一种方法是使用 Apollo 网络接口的中间件/后件。

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