I have an infinite scroll list. I recently updated to the latest Apollo client and noticed infinite scroll no longer works.
Upon deeper investigation. I noticed when I call fetchmore with the incremented skip, it causes the entire page to re-render. Any ideas?
Query:
const {
data,
loading: queryLoading,
fetchMore,
error,
networkStatus
} = useQuery(SEARCH_PROFILES, {
variables: { ...searchParams, skip: skip.current },
fetchPolicy: "cache-first",
notifyOnNetworkStatusChange: true
});
FetchMore
const fetchData = () => {
ErrorHandler.setBreadcrumb("Fetch more profiles");
skip.current =
skip.current + parseInt(process.env.REACT_APP_SEARCHPROS_LIMIT);
const intLimit = parseInt(process.env.REACT_APP_SEARCHPROS_LIMIT);
if (hasMore.current) {
fetchMore({
variables: {
searchType,
long,
lat,
distance,
ageRange,
interestedIn,
skip: skip.current,
limit: intLimit,
isMobile: sessionStorage.getItem("isMobile")
},
updateQuery: (previousResult, { fetchMoreResult }) => {
if (!fetchMoreResult) {
hasMore.current = false;
return previousResult;
} else if (
fetchMoreResult.searchProfiles.profiles.length < intLimit
) {
hasMore.current = false;
}
const newData = produce(previousResult, (draftState) => {
if (draftState.searchProfiles.profiles) {
draftState.searchProfiles.profiles.push(
...fetchMoreResult.searchProfiles.profiles
);
} else {
draftState.searchProfiles.profiles =
fetchMoreResult.searchProfiles.profiles;
}
});
return newData;
}
});
}
};