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

TkDodo · Accepted Answer · 2022-06-19 10:40:23Z

5

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.

answered Jun 19, 2022 at 10:40

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Huan Huynh Over a year ago

Thanks, I was curious about this too, because my pagination works fine but I was seeing the undefined so I wonder if there's anything wrong.

Alexander Pankin Over a year ago

And because of this I can't update my list based on the filter state for changes in the items on the first page

Collectives™ on Stack Overflow

React query infinite scroll pageParams is undefined

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related