CODEWITHSUNDEEP
javascriptreactjsreact-hooksreact-query
Jerin
Jerin

Reputation: 736

React query infinite scroll pageParams is undefined

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?

enter image description here

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`,
      {},
      {},
    );
  },

Upvotes: 4

Views: 6291

Answers (1)

TkDodo
TkDodo

Reputation: 28988

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.

Upvotes: 5

Related Questions