reactjs - 如何在父组件重新渲染时强制 Apollo Query 组件重新运行查询

Question

我正在使用 Apollo 客户端的 <Query>在生命周期方法中状态更改时重新呈现的组件内。我希望拥有我的<Query>组件重新运行查询，因为我知道数据已更改。查询组件似乎正在使用需要在重新运行查询之前使其失效的缓存。

我正在使用一种奇怪的解决方法来缓存 refetch从父组件中的 render prop 回调，但感觉不对。如果有人感兴趣，我会在答案中发布我的方法。

我的代码看起来像这样。我删除了loading和error为了简洁起见，处理查询以及其他一些细节。

class ParentComponent extends React.Component {
  componentDidUpdate(prevProps) {
    if (this.props.refetchId !== prevProps.refetchId) {
      const otherData = this.processData() // do something
      this.setState({otherData}) // this forces component to reload
    }
  }

  render() {
    const { otherData } = this.state

    return (
      <Query query={MY_QUERY}>
        {({ data }) => {
          return <ChildComponent gqlData={data} stateData={otherData} />
        }}
      </Query>
    )
  }
}

如何强制<Query>获取新数据并传递给 <ChildComponent> ？

尽管ParentComponent当 Prop 或状态改变时重新渲染，Query不重新运行。 ChildComponent获得更新 stateData Prop ，但有一个陈旧的 gqlData支柱。据我了解 Apollo 的查询缓存需要失效，但我不确定。

请注意传递refetch to ChildComponent 不是答案，因为它只显示来自 GraphQL 的信息，并且不知道何时重新获取。我不想引入计时器或以其他方式复杂化ChildComponent要解决这个问题 - 它不需要了解这种复杂性或数据获取问题。

Answer 1

我遇到了几乎类似的情况，我用 fetchPolicy 解决了这个问题属性:

<Query fetchPolicy="no-cache" ...

任务是通过单击列表项从服务器加载一些详细信息。

如果我想添加一个操作来强制重新获取查询(例如修改详细信息)，我首先分配 refetch至this.refetch :

<Query fetchPolicy="no-cache" query={GET_ACCOUNT_DETAILS} variables=... }}>
  {({ data: { account }, loading, refetch }) => {
  this.refetch = refetch;
...

在我希望重新获取发生的特定操作中，我调用了:

this.refetch();