React-Apollo 查询重新获取导致子级卸载

Question

我有一个封装在 Query 组件中的显示组件，用于接收来自 GraphQL 查询的数据。执行突变后，我必须重新获取数据以更新商店。问题是调用refetch() 会导致子组件被卸载，从而破坏了用户一直在进行的交互和滚动以导致突变。

有没有办法调用refetch() 而不会导致孩子卸载？如果没有，是否有更好的方法来更新不会导致卸载的商店？下面是带有Query 组件及其子组件的代码。

<Query
  query={query}
  variables={{videoId}}
>
  {
    ({loading, error, data, refetch }) => {
      if (loading) 
        return <p>Loading...</p>;
      if (error) {
        console.log(error);
        return <p>Error :(</p>;
      }

      const onChange = () => {
        console.log("refetching");
        return refetch();
      }

      const {timestampCollection} = data;
      return(
          <TimestampCollection onChange={onChange} player={this.state.player} timestampCollection={timestampCollection[0]} />
      )
    }
  }
</Query>

谢谢大家的帮助！

Answer 1

尝试使用fetchPolicy="network-only"，如下所示。

<Query
  query={query}
  variables={{videoId}}
  fetchPolicy="network-only"
>