Modifying payload client-side before caching

Say I have a payload that includes something like category_id in each of the items returned e.g.:

[
  { category_id: 1, ...}, 
  { category_id: 2, ... },
]

but I want to expand that client side to also include a full category: Category object, e.g:

[
  { category_id: 1, category: { ... } /* some Category object corresponding to id 1 */, ... },
  { category_id: 2, category: { ... } /* some Category object corresponding to id 2 */, ... },
]

I only want to do this once and have the expanded objects cached. When using react-query directly, you can do this by just doing it in your query function. Is there a way to do this with tRPC? Some kind of "transform before caching" option?

Like setting the cached query data manually via the query client? Hmm maybe, sounds a bit tricky or error prone though. Maybe an alternative would be not to use trpc's generated useQuery and instead use useQuery directly calling trpc's generated query function for the data myself

I think I'll give it a shot, thanks for your help!

I just ended up doing things like:

const client = trpc.useContext()
useQuery(['my-api-key', input], () => client.myApi.fetch(input).then(transform))