React Query v3 useInfiniteQuery returns isLoading, isFetching always true and isFetchingNextPage always false

Question

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.

Akif · Accepted Answer · 2020-12-17 11:37:32Z

1

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

edited Dec 17, 2020 at 11:37

Akif

7,6687 gold badges33 silver badges62 bronze badges

answered Dec 17, 2020 at 11:19

Erdal SATIK

6702 gold badges10 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shivam · Accepted Answer · 2024-02-14 05:58:20Z

0

Using isRefecting works perfectly fine for me except for using isFetching.

{isRefetching && <GlobalLoading />}

answered Feb 14, 2024 at 5:58

Shivam

958 bronze badges

Collectives™ on Stack Overflow

React Query v3 useInfiniteQuery returns isLoading, isFetching always true and isFetchingNextPage always false

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related