useInfiniteQuery not keeping all pages
Hello, I am using useInfiniteQuery for a paginated query. I expected when the second page is queried
the pages array to have 2 pages, however it only contains the last page. I'm not sure what i'm doing incorrectly here.
the pages array to have 2 pages, however it only contains the last page. I'm not sure what i'm doing incorrectly here.
export const playerKeys = {
all: ['players'] as const,
list: () => [...playerKeys.all, 'list'] as const,
detail: (id: string) => [...playerKeys.all, 'detail', id] as const,
};
export const usePlayers = (queryParams: PlayerSearchInputDTO = { page: 0 }) => {
const apiClient = useApiClient();
const queryOpts = useInfiniteQuery<PlayerOutputArrayDTOAPI, AxiosError<PlayerOutputArrayDTOAPI>>({
queryKey: [...playerKeys.list(), { ...queryParams }],
queryFn: async ({ pageParam = queryParams.page }) =>
(
await apiClient.player.playerControllerSearch({
...queryParams,
page: pageParam,
})
).data,
keepPreviousData: true,
getNextPageParam: (lastPage, pages) => hasNextPage(lastPage.meta, pages.length),
useErrorBoundary: (error) => error.response!.status >= 500,
});
const InfiniteScroll = useMemo(() => {
return <InfiniteScrollComponent {...queryOpts} />;
}, [queryOpts]);
return { ...queryOpts, InfiniteScroll };
};export const playerKeys = {
all: ['players'] as const,
list: () => [...playerKeys.all, 'list'] as const,
detail: (id: string) => [...playerKeys.all, 'detail', id] as const,
};
export const usePlayers = (queryParams: PlayerSearchInputDTO = { page: 0 }) => {
const apiClient = useApiClient();
const queryOpts = useInfiniteQuery<PlayerOutputArrayDTOAPI, AxiosError<PlayerOutputArrayDTOAPI>>({
queryKey: [...playerKeys.list(), { ...queryParams }],
queryFn: async ({ pageParam = queryParams.page }) =>
(
await apiClient.player.playerControllerSearch({
...queryParams,
page: pageParam,
})
).data,
keepPreviousData: true,
getNextPageParam: (lastPage, pages) => hasNextPage(lastPage.meta, pages.length),
useErrorBoundary: (error) => error.response!.status >= 500,
});
const InfiniteScroll = useMemo(() => {
return <InfiniteScrollComponent {...queryOpts} />;
}, [queryOpts]);
return { ...queryOpts, InfiniteScroll };
};
