Split a response into individual cache entries

[MartinP-C]

I'm working with an API where the team mandates we bulk fetch items, instead of multiple parallel requests for single items.
e.g. GET /posts?postIds=abc1,def2,hij3 instead of GET/post/abc1 + GET /posts/def2

On the first page of the app that displays all items I create a query for the bulk fetch:

const postIds = ["abc1", "def2", "ghi3"];

const { data } = useQuery({
  queryKey: ["posts", postIds],
  queryFn: async () => {
    return await axios.get("/posts", { query: { postIds } });
  },
});

On an individual item page, I'm creating a query for the individual item:

const postId = ["abc1"];

const { data } = useQuery({
  queryKey: ["posts", postId],
  queryFn: async () => {
    return await axios.get(`/posts/${postId}`);
  },
});

This individual post of course doesn't match the cache because the keys are different from the previous bulk fetch so triggers a request for the item, but I already had the data from the previous page - the request isn't necessary.
I could search the cache directly but I'd like the individual page to implement useQuery in case the individual page is navigated to directly. Then the item can be fetched.

What is the best way to go about this?
It feels like I'd like to break down the result of the bulk fetch so that each item gets it's own cache entry, then the individual page will match if it happens to already exist.

[TkDodo]

you need something like data-loader to achieve that. This is a good discussion with a reproduction:

#365 (comment)

[MartinP-C]

Thanks for getting back to me. If only I'd searched for batching first!
Sounds like exactly what I need.