What if I need to pass custom information to my query function?
In v4 docs we can find this section: https://tanstack.com/query/v4/docs/framework/react/guides/infinite-queries?from=reactQueryV3&original=https%3A%2F%2Freact-query-v3.tanstack.com%2Fguides%2Finfinite-queries#what-if-i-need-to-pass-custom-information-to-my-query-function.
Unfortunately it's not present in v5, and as far as I can see passing additional data to
fetchNextPage doesn't do anything and the data gets lost anyways. This feature is crucial for me, as I'm implementing a kanban board, where each kanban stack will be infinitely scrollable. My API can work in two ways:
- I can fetch data for all stacks at once, which is very convenient when doing initial data fetching
- I can specify which stack I want to fetch next, which is convenient when scrolling one of the stacks and trying to fetch more data for it
The first scenario is easy to implement, but I found the second one to be super tricky. With v4 API I would just pass stack-related information to the fetchNextPage function and everything would work just as expected, unfortunately I can't find a way of doing so using v5. Is there any solution to this problem, or should I just downgrade to v4?
Making a separate infinite query for each stack may not be the perfect solution here as we're not building everything from scratch. This feature is long finished, we're just migrating from another library, so keeping things as similar as possible to the previous solution would save us from weeks of refactoring.2 Replies
eager-peach•2y ago
As far as I understood, each stack infinite list, should be stored under different query key (eg. make stackId part of query key) to solve your problem. I solved a similar problem this way. Thanks.
fair-roseOP•2y ago
Ye, I guess it's the only way, I just hoped I can avoid it as it will take much more time. Thank you!