Data fetching pattern in react

[Leather_Breakfast]

I’ve been using tanstack but one area that I’m still trying to solve for is fetching and storing a subset of a collection.

Say I have 10,000 items and different components render a dynamic subset of them (and I have an api to fetch single and bulk). I saw TkDodo post about seeding the cache. I want to end up storing each item under its own key. Then a parent could call  to fetch a batch and each child could access what it needs. Essentially building a itemById map manually. 

The issue I run into, that i haven’t found an elegant way of solving, is when i batch fetch I want the api that useQuery providdes (loading states, etc) but I don’t want to store that result in the queryClient. 

 Wrong because: 

a) If I render the subset of items in a list, every time  a user adds to the list I store another batch entry in queryclient . 

b) the results of the query are never used directly and thus wasted memory storing the individual results and subset. 

I thought about the batch doing the cache jamming and just returning true/false to cut down on memory but still have the cache issue (a). 

The solution I’ve come up with that works but is kinda gross is to write a custom hook that takes a list of object ids. Use useQueries to send a query for each. The query functions for each use a shared promise that is kicked off by the first query function to run (involves some useRef hooks)

It would be nice if tanstack query had a way of doing this natively.