Looking for (typescript) useInfiniteQuery examples with a nextPageToken
I think that this guide:
https://tanstack.com/query/v4/docs/guides/infinite-queries
is not really sufficient in getting somebody familiar with how useInfiniteQuery works.
For example it doesn't really clarify that lastPage is like a data obect (for the last page)
And why and how you can pass it into the queryFn.
I think the guide would benefit for a section and code example utilising a nextPageToken.
And hoping you could tell me how to pass the token / send me a good code example.
Infinite Queries | TanStack Query Docs
Rendering lists that can additively "load more" data onto an existing set of data or "infinite scroll" is also a very common UI pattern. React Query supports a useful version of useQuery called useInfiniteQuery for querying these types of lists.
When using useInfiniteQuery, you'll notice a few things are different:
11 Replies
frail-apricotOP•4y ago
renaming nextPageToken to pageParam as the paramter of the queryFn resolved the issue from the screenshot.
But I'm still having troubles destructuging the data object. Good code examples would be highly appreciated
genetic-orange•4y ago
this is our working infinite query example: https://tanstack.com/query/v4/docs/examples/react/load-more-infinite-scroll
React Query Load More Infinite Scroll Example | TanStack Query Docs
An example showing how to implement Load More Infinite Scroll in React Query
genetic-orange•4y ago
For example it doesn't really clarify that lastPage is like a data obect (for the last page) And why and how you can pass it into the queryFn.lastPage isn't passed to the queryFn - the result of
getNextPageParam is, and it's named pageParam. The docs say:
The getNextPageParam and getPreviousPageParam options are available for both determining if there is more data to load and the information to fetch it. This information is supplied as an additional parameter in the query functionI totally agree that we should add here that the param available in the queryFn is named
pageParam. It is documented somewhere else (https://tanstack.com/query/v4/docs/guides/query-functions#queryfunctioncontext) which is likely not good enoughQuery Functions | TanStack Query Docs
A query function can be literally any function that returns a promise. The promise that is returned should either resolve the data or throw an error.
All of the following are valid query function configurations:
genetic-orange•4y ago
But I'm still having troubles destructuging the data object.This is mentioned on the page you linked:
When using useInfiniteQuery, you'll notice a few things are different: data is now an object containing infinite query data: data.pages array containing the fetched pages data.pageParams array containing the page params used to fetch the pages
frail-apricotOP•4y ago
alright, thank you Dominik.
In the jsx of the code example I see there's a page.data.map inside a pages.map.
Can you think if any downsides for - insdead of doing that - concatinating all the items of all the pages into one item list that is mapped through?
And then how would you do that?
I'm asking because before implementing useInfiniteData I was able to map through an item list like this:
frail-apricotOP•4y ago
while driving the slicePosition (in a different component) like this:
frail-apricotOP•4y ago
but now,
I'm not mapping through one big item list anymore.
frail-apricotOP•4y ago
Instead I map through the "currentPateItems" when displaying items:
frail-apricotOP•4y ago
like this:
const currentPosition = slicePosition >= (displayedItemsNum-1) ? (slicePosition - ((pageIndex + 1) * pageLength)): 0
if (sourceCategory.type === "youtube") {
return (items?.length > 0 && items.slice(currentPosition, currentPosition + displayedItemsNum).map((item: any) =>---frail-apricotOP•4y ago
and the onClick handler that drives the slicePosition also become more complicated when I now also have to drive the pageIndex:
frail-apricotOP•4y ago
so as you might imagine, I'm not that happy with the added complexity. (besides the fact that it doesn't really work yet anyway)
--> I would be gratefull if you could tell me how to concatenate the items of all the pages