reactjs - ApolloClient V3 无限滚动到获取后的第一项更多

Question

感谢您来到这里!我是 React 和 Apollo 的新手，我会尽力解释我的情况。

现在，我使用 ApolloClient V3 实现了“无限”滚动到我的网站。这个无限卷轴可以看here .尝试时，您会看到整个页面都在刷新，而不仅仅是 fetchMoreResult 中添加的数据。

我是按照this YouTube video实现的.在此视频中，您可以看到它并没有发生，代码保留在底部并偶尔出现旋转。

下面我将向您展示我的代码:

我正在使用

const { data, error, loading, fetchMore, networkStatus } = useQuery(
GET_ALL_COUNTRIES_MAIN,
    {
      notifyOnNetworkStatusChange: true,
      variables: {
        offset: 0,
        limit,
      },
    }
  );

  if (!data || !data.globaldatasortednew) return <CircularProgress />;

拉取我的数据。然后我像这样设置一个路径点来获取更多:

 return (
    <div className={classes.container}>
      <Grid container={true} justify="center" spacing={2}>
        {data.globaldatasortednew.map((country, index) => {
          return (
            <React.Fragment key={country.countryid}>
              {index === data.globaldatasortednew.length - 5 && (
                <Waypoint
                  onEnter={() =>
                    fetchMore({
                      variables: {
                        limit: 30,
                        offset:
                          data.globaldatasortednew[
                            data.globaldatasortednew.length - 5
                          ].countryid,
                      },
                    }).then((fetchMoreResult) => {
                      setLimit(
                        data.globaldatasortednew.length +
                          fetchMoreResult.data.globaldatasortednew.length
                      );
                    })
                  }
                />
              )}
      </Grid>
      {networkStatus === 3 && <CircularProgress />}

在手机上，这会导致数据回滚到顶部，很不方便？如何防止这种情况发生并且不让整个 Grid 重新渲染？

再次感谢，我希望我描述的足够清楚!

Answer 1

对于有同样问题的人，对我来说这是 apollo 缓存策略问题。

从 fetchPolicy 中删除 cache-and-network 是好的 ;)