Question

我们正在使用react-apollo，它是我们项目中的graphql HOC。另外，我们正在使用PureComponent中的react，以确保父级每次重新渲染时，如果未更改子级props，也不会导致子级组件的重新渲染。为了在apollo cache中进行读写，我们使用apollo client。

graphql HOC与一个组件挂钩，可以从服务器检索数据，并将其存储到缓存中。而且我们希望将部分数据从缓存中提供给后代组件。

让我们举个例子。在祖先级别，我们从服务器获取项目列表。在子级，我们需要apollo商店中已经存在的特定商品的详细信息。

要执行相同的操作，可以使用三种方法：

将数据作为道具传递给后代组件。

这里是Grand Parent Component的渲染方法，我们从服务器中获取项目列表。

render(){
  return (
    <ListComponent list={this.props.list}/>
  )
}

这是列表组件的呈现方法。

render(){
  return (
    <ItemComponent list={this.props.list} selectedItem={"1"}/>
  )
}

这是项组件的渲染方法。

render(){
  const item = this.props.list[this.props.selectedItem]
  return (
    <div>{this.props.item}</div>
  )
}

将graphql HOC设置为fetch-policy的后代组件内钩住cache-first。

这是项目组件，我们在其中钩住graphql query以获取项目。

class ItemComponent extends React.PureComponent {
 render(){
  return (
     <div>{this.props.item}</div>
  )
 }
}
export default compose(
 graphql(QUERY, {
 options: ({id}) => ({
    variables: {id}
  })
 }
)

使用apollo client的{{1}}函数。

readFragment

这三种方法也有相关的利弊。

第一种方法在每种情况下都有效。唯一的问题是我们通过不必要的道具自上而下传递数据。
第二种方法在每种情况下都有效。唯一的问题是我们必须不必要地挂钩查询来访问缓存。
第三种方法看起来很干净，但是唯一的问题是更新render(){ const item = client.readFragment({ id:`List:${this.props.selectedItem}` fragment:"ListFragment" }); return ( <div>{this.props.item}</div> ) }时组件不会重新渲染，因为我们使用了apollo cache。

我对这三种方法感到困惑。因此，如果您可以提供我应该使用哪种方法的见解，或者可以提供任何其他混合方法，那么将对您有很大的帮助。

推荐使用哪种方式使用apollo存储，读取片段/读取查询或在组件中使用graphql hoc或传递道具来连接查询？

0 个答案: