thanks for being out here! I am new to React and Apollo and will try my best to explain my situation.
Right now I implemented an 'infinite' scroll to my website with ApolloClient V3. This infinite scroll can be seen here. As you try it out, you see that the whole page refreshes instead of just the data that gets added in fetchMoreResult.
I implemented it according to this YouTube video. In this video, you can see that it doesn't happen, the code stays at the bottom and showing an occasional spin.
Below I will show you my code:
I am using
const { data, error, loading, fetchMore, networkStatus } = useQuery(
GET_ALL_COUNTRIES_MAIN,
{
notifyOnNetworkStatusChange: true,
variables: {
offset: 0,
limit,
},
}
);
if (!data || !data.globaldatasortednew) return <CircularProgress />;
To pull my data. Then I set a waypoint to fetchMore like this:
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 />}
On mobile phones, this causes the data to scroll back to the top which is quite inconvenient? How to prevent this and don't let the whole Grid re-render?
Once more, thanks, and I hope I was clear enough in describing!