pbesh•2y ago

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, ... },
]

[
  { 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 */, ... },
]

[
  { 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?

6 Replies

Unknown User•2y ago

Message Not Public

pbesh•2y ago

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

Unknown User•2y ago

Message Not Public

pbesh•2y ago

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

marko•16mo ago

@pbesh hey! did you ever end up finding an elegant solution to transforming query data before it is stored in the cache? thanks!

pbesh•15mo ago

I just ended up doing things like:

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

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