0
298
ViewsReact 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?
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`,
{},
{},
);
},
1 answers
Answer question0
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.