React Query 无限滚动分页重置为首页

Question

在我的反应原生应用程序中，我使用

react-query

从后端获取用

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,
                };
            }
        }
    );
}

spring boot

端点看起来像这样

    @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)

返回带有包含分页对象的元数据的对象，如下所示

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

上面的所有值都只是在 Spring Boot 中取自

Pageable

的值，因此页面索引从 0 开始

以及使用查询的

FlatList

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}
/>

问题是，当我滚动到最后一页时，它开始一次又一次地从第 0 页获取数据。我错过了什么吗？

Answer 1

我通过创建一个商店并将下载的数据和分页保存在商店中解决了这个问题。然后，每次下载新页面时，我都会更新商店，如果到达最后一页，我会禁用加载更多数据