Query batching - a nice feature to have?

[dwjohnston]

Here's the concept.

Say you have a todo item that consists of normalised properties like:

{
     todoId: "123", 
     assigneeId: "user-1", 
     projectId: "project-abc", 
     tagIds: ["tag-1", "tag-2"] 
}

And you're going to fetch a list of todos, and then display them as a table, and you need to denormalise the properties, to retrieve the real name, by fetching /users/user-1, /projects/project-abc etc.

Now the problem is, say you have 25 items on the list, and each one has a unique assignee, project, tag then that's potentially 75 fetch requests you'll make simultaneously.

Of course, we want to try retrieve this data via TanStack Query - so if it's already cached we don't need to make the fetch request.

Now if the API doesn't support batching, then there's not much we can do.

But possibly, our API supports batching the retrieval of resources, for example something like GET /users?userId=user-1,user-2,user-3.

In this case, the suggestion is that TanStack Query has the ability to detect when multiple requests are made for the same query key type, and batches them.

Example usage might look like:

function useUser(userId) {
    return useQuery({
          queryKey: ["user", userId], 
          queryFn: async () => {
                const response = await fetch(`/user/${userId}`); 
                return response.json(); 
          }, 

          batchQueryFn: async (ids) => {
                 const response - await fetch(`/users?userId=${ids.join(',')}`); 
                 const users = await response.json(); 

                 return users.map((v) => {
                       return {
                           key: v.userId,   // We return a array of objects of this shape, where the key allow Tanstack Query to know what key the data related to. 
                           data: v
                       }
                 });
                 
          }
    }); 
}

Maybe I'm over thinking things - but has this kind of problem been encountered?

[TkDodo]

if your API supports batching, this is a good solution based on dataloader:

• Batching #365 (comment)