Aggregate individual queries to avoid extra round trips to the server

[canderis]

I have a use case I keep running into that I haven't found a good solution for yet.

Let's say I have an endpoint that looks up information from one or more key:
api/pokemon?names=pikachu
api/pokemon?names=pikachu,charmander,eevee

And I have a bunch of components that only care about one pokemon each. They function completely independent of each other, and so each have their own useQuery(['pokemon', myComponentsPokemon]).

This leads to a lot of simultaneous calls to the pokemon api since they all usually end up needing to be refetched at the same time.

I want to be able to combine all these calls together so we only have one api call using the list, but I'm not sure if there's a good way to do it.

I could try maintaining a list in a context/common ancestor of all the required pokemon, and pass that down to the components but then I'd have to make sure every component removes the pokemon they care about from that list when the component unmounts. This gets tricky though since multiple components might care about the same pokemon, and even though they mostly all need to refetch at the same time it isn't always the case like when a new pokemon component is added--it needs to fetch its data but the rest of the components aren't necessarily stale yet.

Ideally, I could pass some sort of batch function to useQuery's config, the queryClient or something that when multiple calls using the partial ['pokemon'] key are triggered within a few milli seconds of one another they can be aggregated together and only one api call would be triggered.

I'm not sure if there's currently a way to do this--I haven't seen one but I may have missed something--or if there’s some workaround I haven't thought of yet. Any help or ideas would be really appreciated!

[TkDodo]

Ideally, I could pass some sort of batch function to useQuery's config, the queryClient or something that when multiple calls using the partial ['pokemon'] key are triggered within a few milli seconds of one another they can be aggregated together and only one api call would be triggered.

not sure how that should work in a generic way, because what you would need is something like:

• batch all calls, and put them into a special batching function
• that function then concatenates the input and makes a call to a separate api that can handle more names
• the result of that api call then needs to be distributed to the various cache keys

I don't think there's a way to do this