仅在 React 组件挂载上运行 Apollo 查询（没有 queryData 和生命周期）

Posted 2023-03-08

【中文标题】仅在 React 组件挂载上运行 Apollo 查询（没有 queryData 和生命周期）

【英文标题】：Run Apollo query only on React component mount (without queryData and lifecycle)

【发布时间】：2017-11-16 00:59:24

【问题描述】：

我在我正在构建的一个相当大的 React 应用程序中广泛使用 Apollo，我发现自己多次面临同样的限制。

我只想在组件挂载时执行查询，以便此组件子路由的更改不会重新触发查询。我也很想保留容器模式，在容器中声明我的查询，包装我的组件并忘记它，这样我的组件本身就不会受到任何 Apollo 的影响。 到目前为止，我已经能够通过制作我自己的 Apollo 高阶组件来做到这一点，该组件接受一个组件、一个查询及其选项并返回一个新组件，该组件将自动在 componentDidMount 上运行 queryData。 Here's the code。然后我这样使用它：apolloQueryHOC(MyComponent, queryOptions);

但是在一个新组件上，我已经开始实现分页，而这种方法对于我实现的复杂分页逻辑来说根本不起作用/变得太丑陋了。问题是，当我使用基本的 Apollo 容器方法时，它就像一个魅力。但它会在每次路线/道具更改时运行。

所以我的问题是，除了使用withApollo 等之外，有没有办法只在装载时运行“容器”查询？

【参考方案1】：

啊，问题实际上是我在中间件中处理身份验证，所以我的查询有''作为令牌，并且令牌是从 indexedDB 中获取并添加到中间件中的查询中，覆盖了''。 因此存储在 Apollo 存储中的查询结果（以正确的令牌作为参数）永远不会匹配以 '' 作为令牌的查询，导致 Apollo 一次又一次地从服务器查询。