pageparams undefined on init with tanstack vue query

46 views Asked by At

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 }) => {
0

There are 0 answers