❓-help

Modifying payload client-side before caching

Ppbesh

9/23/2022

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?

UUUnknown User

9/28/2022

2 Messages Not Public

Ppbesh

9/28/2022

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

UUUnknown User

9/28/2022

Message Not Public

Ppbesh

9/28/2022

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

UUUnknown User

4/14/2023

Message Not Public

Ppbesh

4/24/2023

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))

Looking for more? Join the community!

❓-help

❓-help

Recommended Posts

Response headersIs it possible to modify the response headers from server to client?API Response caching not working on vercel ⁉I've followed the instructions in https://trpc.io/docs/v9/caching for API Response caching and it's when throwing a TRPCError, is there a way to include an internal error code ?for the given screenshot, if such error happens I wanna prompt the user to login or something.extra json property added after data when consuming a query hook.I have this issue where when consuming a RQ hook there is an extra `json` object that I have to use Problem using next+ssgHi, Im trying to use the @trpc/next SSG Helper and I get content on the page. Although I noticed tha Error handlingWe have some trpc routers that make requests to another api - we use axios for that. I'd like to for Please read before creating a postWe're trying out forums for help now. Please make sure to select the relevant tags on your post. Als