在其他类方法中使用 <Query> 的正确模式

Question

我了解 Apollo 更喜欢我们在渲染方法中使用 <Query> 来进行查询，而不是 this.props.client.query()。

我创建的每个新课程，我都会从 <Query> 组件开始（以保持最佳实践），但 100% 的时间最终会删除它并在我的 componentWillMount 中执行 this.props.client.query()，否则基本上所有其他类方法都是无用的，因为它无法访问它需要的任何数据。

从<Query> 组件获得的任何东西都只能在render() 中使用是故意的吗？

几乎完全依赖this.props.client.query() 是反模式吗？如果是这样，我是否希望创建 另一个 组件以放入我的 <Query> 中，这样 componentDidUpdate 之类的东西就不会变得无用？

对所有问题表示歉意，我很惊讶我之前没有看到过这个问题。

Answer 1

不使用client.query 的主要原因是它不会观察缓存的变化。如果缓存中的信息被更新（例如，在发生突变之后），除非重新挂载，否则组件中呈现的数据将不会更新。

如果您有一个类组件，并且您正在使用Query 组件并且您需要提供的数据可用于render 之外的方法，那么是的，您需要有两个组件以便数据可以作为道具传下来。这有效地迫使您使用container/presenter pattern。

或者你也可以使用graphql HOC 来达到同样的效果。

但是...从 3.0 版开始，render-prop 组件和 HOC 都是 deprecated。因此，就“最佳实践”而言，您可能希望migrate 无论如何都要使用功能组件和钩子。