useInfiniteQuery Hook
Hello Everyone, I'm using the useInfiniteQuery hook to fetch data so i can paginate, i've been able to get the
fetchNextPage working via the getNextPageParam method. I do not know how to go about the fetchPreviousPage working, i've tweaked with the getPreviousPageParam method but it doesn't still work. I'll appreciate if anyone can point out how i can fix this. Attached below is the query function:
const {
data,
fetchNextPage,
fetchPreviousPage,
error,
isPending,
isFetchingNextPage,
isFetchingPreviousPage,
hasPreviousPage,
hasNextPage,
} = useInfiniteQuery({
queryKey: ['projects'],
queryFn: ({ pageParam = 1 }) => {
return hostFetch(/user/search, {
method: 'POST',
query: {
page: pageParam,
limit: 20,
// order_by: 'id__',
sort: 'DESC',
},
headers: {
Authorization: Bearer ${AuthToken()},
},
body: {
payload: {
status: 'active',
},
},
});
},
initialPageParam: 0,
getNextPageParam: (lastPage, allPages, lastPageParam) => {
if (lastPage.data.length === 0) {
return undefined;
}
return lastPageParam + 1;
},
getPreviousPageParam: (
firstPage,
allPages,
firstPageParam,
pageParam
) => {
if (firstPageParam <= 1) {
return undefined;
}
return pageParam.length - 1;
},
});0 Replies