使用 graphql 和 apollo 客户端获取数据时将数据存储在状态中

Question

我一直在使用 react 和 redux，每次，我都会调用 ComponentDidMount 中的一些 rest api，我可以用它设置一个状态并将该状态传递给我的孩子或更改该状态并使用它。 我也可以将这些数据保存在我的 redux 中并做我想做的所有事情。 我最近开始使用 graphql，我看到当使用查询在渲染中获取数据时，我们会渲染我们想要的数据，依此类推。 但我关心的是如何代替渲染它，我可以将它存储在某种状态，玩它，然后将它传递给孩子。 我在 apollo 中发现了这个链接状态，但无法清楚地理解它的基本功能？ 如何解决这个状态管理问题并使用来自 apollo 的数据设置的状态。 我真的错过了

的这个功能

this.setState({
  data:(some api data )
)}

Answer 1

假设我进行了一个查询，我希望我的三个子组件共享相同的数据。您将如何使用 graphql 实现这一点？

第一种方法

从 api 读取的数据可以通过缓存访问 - 默认策略是缓存优先。每个孩子都可以使用 graphql（HOC 或组件）从缓存中访问数据。他们每个人都可以使用不同的查询来获取组件真正需要的数据。如果所有查询字段都是父查询的子集 - 您可以使用仅缓存策略。

第二种方法

您可以使用getDerivedStateFromProps() 操作 api 数据。您可以将这些值作为 props 直接传递给孩子（不使用 graphql 缓存访问）。

第三种方法

React classic（将 props 向下传递）：只需将 data prop（未修改）传递给子渲染 <Child data={this.props.data} />（HOC 内的父级）或 <Child data={data} />（<Query/> 组件内的渲染 prop）