Transform server response on the client before caching
How can I transform the server response on the client before putting it in the cache? Is it necessary to use a vanilla client or is there a way to do it while using the tanstack query integration?
8 Replies
Why transform the response on the client? I believe this is not optimal and can't you just send the data from the server exactlly on the way the client will use it to avoid unecessary bandwidght, etc?
Alternatively you can use
selectors of react-query to filter/select only specfic fields of your data before reading that in the component.Because I can't send the data from the server exactly the way the client wants it but I still want to transform the data before it gets put in the cache.
I think the way to go is use selector, in react query you could customize the queryFn but not sure on trpc. Anyway this is an anti patern if the server is returning the data not in the shape that the frontend needs, that's why I'd definitely create a new method or talk to your backend devs to modify the existent.
Not sure why you think this is an anti-pattern: https://tkdodo.eu/blog/react-query-data-transformations#:~:text=This%20is%20my,you%20expect%20it.
React Query Data Transformations
Learn the possibilities to perform the quite common and important task of transforming your data with react-query
Also, using the select function wouldn't work as it doesn't transform the data before caching which is what I want.
I've been able to do it by manually calling the trpc procedures inside the queryFn with the vanilla client, but I was wondering if this was possible with the tanstack query integration.
Hey @João Bezerra nice that you got that solved at the end, but I definitely think that transforming and parsing data in the client side/frontend is definitely a bad choice - except for scenarios that we have no control of our backend or is impossible to change it - it's a personal opinion but throughout the years I have seem too many issues/frontend problems because the shape of the data doesn't match on how the frontend needs it, definitely it adds more complexity, like in your cause, you are calling procedures inside the query FN, which is breaking the integration to use just trpc out of the box.
But at the end glad you got it solved 🙂
But at the end glad you got it solved 🙂
I would think the problem is precisely the other way around. This is only a problem because (apparently) trpc does not allow for overriding the queryFn function. It should though as this is a very common thing to do. I'm actually surprised that it's not possible.
Of course, it would be better if the frontend received the data in the best shape for it, but sometimes that is not possible. Just because trpc's tanstack query integration seemingly does not allow for overriding the queryFn this does not mean that transforming data on the frontend is necessarily an anti-pattern.
Yes, makes sense - "sometimes is not possible" - yeah, those cases where we don't have control of the backend definitely we need something in the f.e to shape the data haha. But I guess if trpc allow to override the query fn would be a anti-pattern and better to use the raw
trpc client and just call the async function together with react query - can't think a lot of useful scenarios for that, since when someone is using trpc the whole idea is to have control of the full stack code. Anyway, thanks for sharing your findings 🙂