How to make infiniteQuery load multiple times (based on a condition that depends on the query result)?

[NicoleRauch]

Hello, I'm a bit stuck right now and I hope you might have some ideas to help me get going again.

I am using infiniteQuery in React (which works great), and in my setting I am loading 50 items, and I want to display 50 items. Sounds trivial.

The caveat is that the user can apply filters to the displayed items, reducing their number, so I would like to reload if the filter reduces the number too much (I mean, I don't really care if it's 50 or 40, but if the user picks a filter so that only a few remain, or none remain, then I need to load more to be able to show more).
And this is the part that trips me up, because I want to trigger the reloading myself, but it needs to fit into React's rendering cycle, or else I obviously get an infinite loop.

Background: This filtering used to be done by the backend, but I want to try switching it to the frontend because it's much faster. Unfortunately this reloading trips me up.

Is there a way to perform this reloading with Tanstack? Thanks in advance for any help!

[TkDodo]

I guess this is the reason why filtering is done in the backend usually 😅 .

What you can do is call fetchNextPage() in the event handler that does the filtering if the items aren’t enough. But there’s no guarantee that the next page has any items matching those filters, so you might have to do this more than once ?

If you want to instead trigger a backend filter if the frontend filter yields no data, just set some state with those filters and add them to the queryKey.

[NicoleRauch]

I guess this is the reason why filtering is done in the backend usually 😅 .

This is slowly dawning on me as well 🤣
Thank you very much for your speedy response! I thought I might have overlooked something obvious, so thanks for the confirmation. Filtering is back on the backend now.