React query infinite scroll pageParams is undefined

Question

I am trying to get data Using useInfiniteQuery, but on my console, I am getting the data but the pageParams is showing undefined, am I missing something to get the pageParams?

Here is my query hook

const useActivityFeedData = () => {
  const {data} = useInfiniteQuery(
    ACTIVITY_FEED,
    ({pageParam}) => Api.user.getActivityFeedData(pageParam),
    {
      getNextPageParam: (lastPage: any) => lastPage?.meta,
    },
  );
console.log(data)
};

My API

  getActivityFeedData: (pageParam: number) => {
    console.log(pageParam, 'pageParam'); // undefined

    return api.get(
      `/rest/s1/eyon/viewer/channel/activity-feed?pageSize=10&pageIndex=0`,
      {},
      {},
    );
  },

Answer 1

You're not missing anything - this is the intended behaviour. pageParams is always calculated for the next page, usually from the previous result. That's what you do in getNextPageParams.

For the first page, there is no "previous result", because it is the first page. That's why the pageParams are undefined. Note how we use default values during destructuring in the examples, e.g.:

const queryResult = useInfiniteQuery(
  ['projects'],
  ({ pageParam = 0 }) => axios.get('/api/projects?cursor=' + pageParam),
  {
    getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
  }
)

for the first page, the cursor will be set to 0, as pageParam is undefined.

So it's just up to you to convert undefined to something that represents "the first page" for your api call.