How to handle batching API calls

[mzedeler]

I have an app where I need to fetch a lot of items incrementally, so for simplicity, assume that I have the item ids in an array, then I call the API with getItems and the first ten items from the array. Once they have been returned, I fire up a new request with the next ten items and so forth.

This call becomes something like:

const queryClient = useQueryClient() 
queryClient.prefetchQuery(['items', ids],() => fetchFn(ids))

During rendering, each item is just mounted as a component with its own id, so it would be easiest if it can pull out the data fetched for its specific id, but this call becomes:

const itemData = useQuery(['items', [id]], () => fetchFn([id]))

But from what I can see, the partial matching algorithm won't match the prefetched items. I guess a possible solution would be to map ids from [id1, id2, ...  ] to { id1: true, id2: true, ... }, but it seems a bit clumsy. Are there any other more obvious ways to do this?

[TkDodo]

the query keys need to strictly match when calling useQuery. You could manually prime the cache after prefetching and create one entry per id.

Or, with select, you would get a useSelector like api:

const useItemsQuery = (ids, select) => 
useQuery(['items', [ids]], () => fetchFn([ids]), { select })

const useItem = (ids, id) => useItemsQuery(ids, (data) => data.find(item => item.id === id))

but you have to tag around all ids for the query key, and every refetch will still fetch all items