Apollo 客户端的全局加载标志

Posted 2023-03-10

【中文标题】Apollo 客户端的全局加载标志

【英文标题】：Global Loading Flag for Apollo Client

【发布时间】：2017-10-13 09:08:09

【问题描述】：

是否有全局 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。

【问题讨论】：

我怀疑你可以用 Apollo 包装一个 HoC 并在那里添加你的自定义逻辑。

我不知道withApollo 是否为全局loading 状态提供任何API？我想也许是通过它的networkInterface 但看起来不像？

它不是开箱即用的。您可以使用自定义网络接口来实现它，但这似乎是适合这项工作的错误工具。我怀疑用 withCustomApollo 之类的东西包装 withApollo，你可以在那里检查加载状态。

但这不适用于任何一个特定的组件——我希望一个单独的组件知道是否正在进行任何 graphql 调用——除非我只弄错了graphql()包装的组件本身将收到 data/loading 道具

哦，那您绝对可以使用自定义网络接口。包装网络接口（批处理或默认），然后每当它查询时设置它正在加载到单例变量。

【参考方案1】：

您可以通过两种方式实现这一目标：

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

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

【讨论】：

你能再解释一下吗？我在哪里可以阅读更多关于这些方法的信息？像代码沙箱代码示例或文档或 github repo 解释这一点？

我的评论来自 5 年前，但使用最新版本的 Apollo，我相信您可以创建一个 new ApolloLink()，根据是否收到结果将全局加载值设置为 true/false与否.. 然后有一个像getApolloLoading 这样的全局函数来更新zustand 或redux 中的状态。但是，如果您需要它了解反应状态，您可能需要在 <App /> 组件中初始化 ApolloClient 和 。

你有任何示例代码吗？我正在使用 nuxtjs/apollo，我正在使用本地状态加载并手动更新它。我想知道阿波罗链接中是否有内置的东西可以做到这一点。或者有没有办法将 axios 与 apollo 链接一起使用？就像它在引擎盖下使用的包？

我没有任何示例代码。您可能会更幸运地发布 *** 问题或 reddit.com/r/reactjs。您可以阅读 apollo 的 repos 的 package.json 以查看它是否使用 axios，但这似乎不太可能，因为这将是不必要的依赖。

谢谢，我发现 '@nuxtjs/observable' 会检查它。那么我只需要找到他们如何在 apollo 客户端中进行 api 调用

【参考方案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);