如何解决ApolloClient V3 无限滚动到获取后的第一项更多
感谢您来到这里!我是 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 />;
提取我的数据。然后我设置了一个航点来 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 />}
在手机上,这会导致数据回滚到顶部,很不方便?如何防止这种情况并且不让整个 Grid 重新渲染?
再次感谢,我希望我描述得足够清楚!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。