Sharing data betweem useQuery with useInfiniteQuery (continuation tokens)
Not sure if I am over thinking this but conceptually I need some advice on what to do. Between these two queries the underlying data is exactly the same.
Goal:
1. User navigates from component 1 which uses
useQuery hook to component 2 which uses useInfiniteQuery
2. I have a little helper function that retrieves cached data from that useQuery hook and transforms it into initialData that useInfiniteQuery expects. This works perfectly on mount.
If user was on page 3 for example, the pageParams might look like this [undefined, abc123, defg123, hijk123]Each param is obviously the token that fetches the current page.
Now when useInfiniteQuery refetches due to staleness, I would want the pageParams to look exactly like this, it would fetch the current page defg123 and have those previous pageParams to fetch the previous page.
So I am not sure how to structure the query configuation.
Note: I pass in the continuation token as a search param for the page to fetch, and the data returned has the continuation token for the next page.2 Replies
continuing-cyan•8mo ago
So the
useQuery hook accepts the page number as a parameter? You could try manually updating the infinite query data in the onSuccess handler for the useQuery (and vice versa), but it might be more complex/finicky than it's worth.
Take a look at the dev tools in the interactive sandbox for this example: https://tanstack.com/query/latest/docs/framework/react/examples/load-more-infinite-scroll?panel=sandbox
It should give you an idea of the shape of query data for an infinite query.React TanStack Query Load More Infinite Scroll Example | TanStack Q...
An example showing how to implement Load More Infinite Scroll in React using TanStack Query.
yappiest-sapphireOP•8mo ago
useQuerry does not have
onSuccess cb anymore....