ApolloClient V3无限滚动到fetchMore后的第一项

Question

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

现在我实现了一个'无限'滚动到我的网站与ApolloClient V3。这个无限的卷轴可以在这里看到。当您尝试时，您会看到整个页面刷新，而不仅仅是在fetchMoreResult中添加的数据。

我根据这个YouTube视频实现了它。在这个视频中，你可以看到它没有发生，代码停留在底部，偶尔显示旋转。

下面我将展示我的代码:

我使用

const { data, error, loading, fetchMore, networkStatus } = useQuery(
GET_ALL_COUNTRIES_MAIN,
{
notifyOnNetworkStatusChange: true,
variables: {
offset: 0,
limit,
},
}
);
if (!data || !data.globaldatasortednew) return <CircularProgress />;

提取我的数据。然后我设置一个路径点来fetchMore像这样:

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 />}

在手机上，这会导致数据滚动回顶部，这是非常不方便的?如何防止这种情况，不让整个网格重新渲染?

再一次，谢谢，我希望我在描述足够清楚!

Answer 1

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

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