I have implemented infinite scroll with useInfiniteQuery from react-query v3. But isLoading, isFetching is always true after first page query. And isFetchingNextPage is always false. After initial load first page, next page requests is made with fetchNextPage()
This my useContents hook.
const useContents = (params) => {
return useInfiniteQuery(
['contents', params.Section],
({ pageParam = 0 }) => fetchContents(pageParam, params), {
getNextPageParam: (lastPage, allPages) => {
if (lastPage.payload.size === PAGE_SIZE) return allPages.length;
return false;
},
refetchInterval: 60000,
staleTime: 60000,
}
);
};
And this is fetchContents
const fetchContents = (pageParam, params) => {
return axios
.get(`${apiDomain}/contents`, {
params: {
Section: params.Section,
ViewType: params.ViewType,
Count: pageParam*PAGE_SIZE,
PageSize: PAGE_SIZE,
...params.questionSectionParam,
},
...generateAxiosOptions('GET'),
})
.then((res) => {
return {
message: res.data.message,
payload: fromJS(res.data.payload),
result: res.data.result,
status: res.status,
pageParam,
};
});
};
I have spent hours but couldn't find the cause.
It turns out that it's a silly mistake. I added a scroll event listener to ref coming from props with an empty array. Below the wrong code and fixed by removing the empty array.
useEffect(() => {
!!contentListRef && contentListRef.addEventListener('scroll', infiniteScroller, false);
return () => {
lastScrollTop = 0;
contentListRef.removeEventListener('scroll', infiniteScroller, false);
};
}, []); // <-- This empty array is the reason for this bug
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments