T
TanStack•9mo ago
ambitious-aqua

`getPreviousPageParam` final parameter - is it the "current" page or is it the previous page?

Hi, Sorry for the repeated queries, I'm just having a hard time getting my mind around useInfiniteQuery. So the documentation code here: If your API doesn't return a cursor, you can use the pageParam as a cursor. Because getNextPageParam and getPreviousPageParam also get the pageParam of the current page, you can use it to calculate the next / previous page param. seems to contradict itself with the code: 
return useInfiniteQuery({
  queryKey: ['projects'],
  queryFn: fetchProjects,
  initialPageParam: 0,
  getNextPageParam: (lastPage, allPages, lastPageParam) => {
    if (lastPage.length === 0) {
      return undefined
    }
    return lastPageParam + 1
  },
  getPreviousPageParam: (firstPage, allPages, firstPageParam) => {
    if (firstPageParam <= 1) {
      return undefined
    }
    return firstPageParam - 1
  },
})
return useInfiniteQuery({
  queryKey: ['projects'],
  queryFn: fetchProjects,
  initialPageParam: 0,
  getNextPageParam: (lastPage, allPages, lastPageParam) => {
    if (lastPage.length === 0) {
      return undefined
    }
    return lastPageParam + 1
  },
  getPreviousPageParam: (firstPage, allPages, firstPageParam) => {
    if (firstPageParam <= 1) {
      return undefined
    }
    return firstPageParam - 1
  },
})
In my experience just now, after calling fetchNextPage several times, it seems that the firstPageParam of the getPreviousPageParam never seems to update. This would imply that the code above is correct in stating that it is the "first" page's param... Not the current? my question is as in the title; is the third parameter of getPreviousPageParam the actual current page or is it going to always be the first page that was requested? If it's the latter, why? Where do I actually obtain the current page? If it's not the latter, then it means my code has some bug in it somewhere which is just getPreviousPageParam to contain the wrong parameter.
No description
1 Reply
ambitious-aqua
ambitious-aquaOP•9mo ago
This may be helpful - above is the console.log that prints out the third paramter to both getlastpageparam and getfirstpageparam. As you can see, getLastPageParam never seems to update. here is the code: 
getNextPageParam: (lastPage, allPages, lastPageParam) => { 
     console.log("getNextPageParam:", lastPageParam);
     if(lastPageParam.page < totalAvailableAmountOfPages) { 
         return { ...lastPageParam, page: lastPageParam.page + 1 }; 
     } 
 },
 getPreviousPageParam: (firstPage, allPages, firstPageParam) =>  { 
     console.log("getLastPageParam:", firstPageParam);

     if(firstPageParam.page > 0) { 
         console.log("oop it seems we want to go back a page yo", firstPageParam);
         console.log("and we will construct the object to return:", { ...firstPageParam, page: firstPageParam.page - 1} )
         return { ...firstPageParam, page: firstPageParam.page - 1} 
     }; 
 }
getNextPageParam: (lastPage, allPages, lastPageParam) => { 
     console.log("getNextPageParam:", lastPageParam);
     if(lastPageParam.page < totalAvailableAmountOfPages) { 
         return { ...lastPageParam, page: lastPageParam.page + 1 }; 
     } 
 },
 getPreviousPageParam: (firstPage, allPages, firstPageParam) =>  { 
     console.log("getLastPageParam:", firstPageParam);

     if(firstPageParam.page > 0) { 
         console.log("oop it seems we want to go back a page yo", firstPageParam);
         console.log("and we will construct the object to return:", { ...firstPageParam, page: firstPageParam.page - 1} )
         return { ...firstPageParam, page: firstPageParam.page - 1} 
     }; 
 }

Did you find this page helpful?