I'm fetching data with useInfiniteQuery from tanstack vue-query 4.37.11. It works well, except for the first query which is not storing its pageParam correctly.
I've read some threads about it and all of them mention adding a default value to the pageParam in the queryFn. I tried, but still stores it as undefined.
Here's how im implementing it:
const {
isFetching,
isFetchingNextPage,
fetchNextPage,
fetchPreviousPage,
} = useInfiniteQuery({
queryKey: ['sales', 'list', limit, getQuery],
queryFn: ({ pageParam = page.value }) => {
return getSales({ start: pageParam, ...getQuery.value });
},
getNextPageParam: ({
data: {
meta: { total_records: total },
},
}) => {
if (total < limit.value) return undefined;
return page.value + 1;
},
getPreviousPageParam: ({
data: {
meta: { total_records: total },
},
}) => {
if (total < limit.value) return undefined;
return page.value - 1;
},
});
I've also tried replacing the default value with a static value:
...
queryFn: ({ pageParam = 1 }) => {