T
TanStack•2y ago
sunny-green

Store non-sequential page with Infinite Query

Hi, is it possible to store result page of queryfn of useInfiniteQuery non-sequentially when a custom a custom page param is passed to fetchNextPage function of useInfiniteQuery eg. When we do this: // Pass your own page param const skipToCursor50 = () => fetchNextPage({ pageParam: 50 }) } the result is still this: data:{ pages:[..//otherpages, //pagewithCursor50], pageParams:[..//otherpageparams,// pageparamswithCursor50], } My original problem statement is to display search results in a messageslist inline like whatsapp or skype. The messages list are paginated and uses useInfiniteQuery. Its a little too long to explain the complete problem, but I can if required.
6 Replies
extended-salmon
extended-salmon•2y ago
passing a pageParam to fetchNextPage is deprecated in v4 and has been removed in v5
sunny-green
sunny-greenOP•2y ago
Thanks @TkDodo 🔮 . For some reasons, I cant update to v5 from v3. However, I saw the v5 also introduced initialPageParam as one of the useInfiniteQuery options. Is there a way, where I could manually implement initialPageParam in application code while still continuing on v3. That might solve my current problem.
extended-salmon
extended-salmon•2y ago
initialPageParam is just the new way of doing:
queryFn: ({ pageParam = 0 })
queryFn: ({ pageParam = 0 })
we used to pass undefined, so you could use default assignment. Now, it's an explicit option
sunny-green
sunny-greenOP•2y ago
I see, Thanks again @TkDodo 🔮 . But will this able to ignore the case where after loading several 'pages', the nextPageParam is genuinely undefined i.e. getNextPageParam: (lastPage, allPages) => unknown | undefined In this case, I dont want the query to make the initial request again and thus continuing the cycle again. The results gets displayed in infinite scroll container. Let me try first though.
extended-salmon
extended-salmon•2y ago
if getNextPageParam is undefined, the queryFn will not be called
sunny-green
sunny-greenOP•2y ago
Thanks @TkDodo 🔮 , this solved my problem conveniently. Ydu do great work!!

Did you find this page helpful?