pbesh
pbesh2y 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
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
pbesh
pbesh2y 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
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
pbesh
pbesh2y ago
I think I'll give it a shot, thanks for your help!
marko
marko14mo 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
pbesh14mo 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))