时间戳

首页 > 解决方案 > 父组件重新渲染时如何强制 Apollo Query 组件重新运行查询

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

问题描述

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

我正在使用一种不稳定的解决方法，它缓存refetch来自父组件中渲染道具的回调，但感觉不对。如果有人感兴趣，我会在答案中发布我的方法。

我的代码看起来像这样。为了简洁起见，我从查询中删除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在道具或状态更改时重新渲染，Query也不会重新运行。ChildComponent得到一个更新的stateData道具，但有一个陈旧的gqlData道具。据我了解，阿波罗的查询缓存需要失效，但我不确定。

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

标签： reactjsgraphqlreact-apolloapollo-client

解决方案

我有几乎类似的情况，我用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();

推荐阅读