useInfiniteQuery Pagination
Hi, I'm implementing an inifinte list of items for the user, and when the user deletes one I want to refetch all pages but it's not working. Let me explain it after showing some code.
function useUserWatchlist({
userId,
pageNumber = 1,
pageSize = 24,
queryOptions,
}) {
const userList = useInfiniteQuery(
['watchlist', userId],
async ({ pageParam = pageNumber }) => await fetchUserWatchlist(userId, pageParam, pageSize),
{
getNextPageParam: (lastPage) => {
let nextPage = null;
if (lastPage.pagination.pageNumber < lastPage.pagination.totalPages) {
nextPage = lastPage.pagination.pageNumber + 1;
}
return nextPage;
},
getPreviousPageParam: (firstPage) => {
let previousPage = null;
if (firstPage.pagination.pageNumber > 0) {
previousPage = firstPage.pagination.pageNumber - 1;
}
return previousPage;
},
...queryOptions,
}
);
return {
....
};
}
Mutate Hook:
const { isLoading: isLoadingRemovingContent, mutate: removeContent } =
useMutation({
mutationFn: ({ userId, contentId }) =>
removeFromUserWatchlist(userId, contentId),
onSuccess: () => {
queryClient.cancelQueries({
queryKey: ['watchlist', userId],
exact: true,
refetchActive: false,
refetchInactive: false,
});
queryClient.refetchQueries(['watchlist', userId], {
exact: true,
active: true,
inactive: true,
});
onContentRemoved && onContentRemoved();
},
});
You can see after deleting I cancel the queries and then I refetch. When I console log the data in OnSucces (the hook mutation) I can see the pageParams are: [undefined, 2, 3, 4]. But the queryFn of the Inifite hook always starts one page before the last and it makes the requests of pages 3, 4, 5. Can anyone help me or give me an insight for this issue?
function useUserWatchlist({
userId,
pageNumber = 1,
pageSize = 24,
queryOptions,
}) {
const userList = useInfiniteQuery(
['watchlist', userId],
async ({ pageParam = pageNumber }) => await fetchUserWatchlist(userId, pageParam, pageSize),
{
getNextPageParam: (lastPage) => {
let nextPage = null;
if (lastPage.pagination.pageNumber < lastPage.pagination.totalPages) {
nextPage = lastPage.pagination.pageNumber + 1;
}
return nextPage;
},
getPreviousPageParam: (firstPage) => {
let previousPage = null;
if (firstPage.pagination.pageNumber > 0) {
previousPage = firstPage.pagination.pageNumber - 1;
}
return previousPage;
},
...queryOptions,
}
);
return {
....
};
}
Mutate Hook:
const { isLoading: isLoadingRemovingContent, mutate: removeContent } =
useMutation({
mutationFn: ({ userId, contentId }) =>
removeFromUserWatchlist(userId, contentId),
onSuccess: () => {
queryClient.cancelQueries({
queryKey: ['watchlist', userId],
exact: true,
refetchActive: false,
refetchInactive: false,
});
queryClient.refetchQueries(['watchlist', userId], {
exact: true,
active: true,
inactive: true,
});
onContentRemoved && onContentRemoved();
},
});
You can see after deleting I cancel the queries and then I refetch. When I console log the data in OnSucces (the hook mutation) I can see the pageParams are: [undefined, 2, 3, 4]. But the queryFn of the Inifite hook always starts one page before the last and it makes the requests of pages 3, 4, 5. Can anyone help me or give me an insight for this issue?
