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

Question

我一直在使用react和redux，每次，我都调用ComponentDidMount中的rest api，我可以使用它设置一个状态，并将该状态传递给我的孩子，或者更改该状态并使用它。 我也可以将这些数据保存在我的redux中，并做我想做的所有事情。 我最近开始使用graphql，我发现当使用查询在render内部获取数据时，我们将渲染所需的数据，依此类推。 但是我担心的是，如何代替渲染它，我可以将它存储在某种状态下，然后使用它，然后再传递给孩子。 我在apollo中进入了acroos这个链接状态，但是由于它的基本作用而无法对其有一个清晰的了解？ 如何解决这个状态管理问题以及如何处理来自阿波罗的数据设定的状态。 我真的错过了

的此功能

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

Answer 1

  

假设我进行了查询，并且希望我的三个子组件共享相同的数据。如何使用graphql实现此目的？

第一种方法

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

第二种方法

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

第三种方法

反应经典（将道具传递到树上）：只需将data道具（未修改）传递给子渲染<Child data={this.props.data} />（HOC内的父级）或<Child data={data} />（{{1内的渲染道具） }}组件）