React Query infinite scroll pagination resets to first page

28 views Asked by At

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?

0

There are 0 answers