React Query infinite scroll pagination resets to first page

Question

In my react-native application I use react-query to fetch the data from backend written in Spring Boot.

export function useFetchAllNotes(kindeId: string) {
    return useInfiniteQuery<ApiResponseListNote, AxiosError, Response>({
            initialPageParam: 0,
            queryKey: ['userNotes', {kindeId}],
            queryFn: ({pageParam = 0}) => fetchNotesForUser(kindeId, pageParam as number),
            getNextPageParam: (lastPage) => {
                const currentPage = lastPage.metadata.paging?.page as number;
                const totalPages = lastPage.metadata.paging?.totalPages as number;
                return currentPage < totalPages - 1
                    ? currentPage + 1
                    : undefined;
            },
            select: (data) => {
                return {
                    pages: data.pages.flatMap((page) => page.data ?? []),
                    pageParams: data.pageParams,
                };
            }
        }
    );
}

the spring boot endpoint looks like this

    @GetMapping("/{kindeId}")
    fun getUserNotes(
        @PageableDefault(sort = ["createdAt"], direction = Sort.Direction.DESC, size = 10)
        pageable: Pageable,
        @PathVariable kindeId: String
    ): ApiResponse<List<Note>> = noteService.getAllUserNotes(kindeId, pageable)

which returns object with metadata containing pagination object like this

export interface ApiResponsePaging {
    'totalPages': number;
    'totalElements': number;
    'page': number;
    'pageSize': number;
}

all the values above are just values taken from Pageable in spring boot, so page indexing starts from 0

And the FlatList where the query is used


const {
    data: notes,
    isLoading: isFetchingNotes,
    error: fetchingNotesError,
    refetch: refetchNotes,
    isRefetching: isRefetchingNotes,
    hasNextPage,
    fetchNextPage,
    isFetchingNextPage
} = useFetchAllNotes(kindeId)

const loadMore = () => {
    if (hasNextPage) {
       fetchNextPage();
    }
};

<FlatList
    data={notes?.pages ?? [] as Note[]}
    renderItem={renderItem}
    keyExtractor={(_, index) => index.toString()}
    numColumns={1}
    onEndReached={({ distanceFromEnd }) => {
      if (distanceFromEnd < 0) return;
      loadMore()
    }}
    onEndReachedThreshold={0.1}
    initialNumToRender={10}
/>

The problem is that when I reach the last page scrolling, then it starts fetching data from 0th page again and again. Do I miss something?

Try to add console.log in getNextPageParam to see what it's return on end reached — quyentho
– quyentho, Commented Mar 31, 2024 at 13:45

asfarasiknow · Accepted Answer · 2024-04-01 11:55:51Z

0

I solved the problem by creating a store and saving the downloaded data and pagination in the store. Then, each time a new page is downloaded, I update the store and if I reach the last page, I disable the loading of more data

answered Apr 1, 2024 at 11:55

asfarasiknow

3254 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

React Query infinite scroll pagination resets to first page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related