我有一个包含在 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>

谢谢大家的帮助!