Call setQueryData() from the backend
I see I can use query on react frontend to simplify how to getting data, but at the end of the day it's always the backend that know when the data has been updated (based on some logic).
And so the frontend cannot make assumptions on when the data in the cache is fresh, lor not.
The simplest solution would be that the backend has a function to invalidate data to the query for the frontend (or to set new data inside).
But calling setQueryData from the backend has no effect.
I found some doc saying I can implement a custom solution using SSE to inform the frontend that a query should be invalidated, but I would say that this need (I think it's a general need) should have an out-of-the-box solution.
I found other doc referring to SSG or SSR, but as far as I understand these technolgies are to provide HTML (i.e. visual) content to frontend, not data of business logic.
Am I wrong?
Is there something I miss?
Thanks
4 Replies
rare-sapphire•12mo ago
This depends a LOT on what framework your using (Next.js, Remix, Tanstack Start, etc.) If you've not got a full-stack app set up yet, best documented way would be to set up https://create.t3.gg/ and check out the tRPC docs https://trpc.io/ (or do the Tanstack Start alpha if your feeling adventurous lol). If you do have some sort of app set up full stack, see if you can install tRPC, it basically knits togetther the server and react query together.
tRPC - Move Fast and Break Nothing.
End-to-end typesafe APIs made e...
End-to-end typesafe APIs made easy. Automatic typesafety & autocompletion inferred from your API-paths, their input data, & outputs 🧙♂️
like-goldOP•12mo ago
Thanks @DogPawHat
I use Next.js, but I'm not using tRPC at the moment
I know about RPC (tRPC is the typescript implementation) and it's great is some scenarios.
But, if I understood your suggestion (please correct me if I didn't), the point is using tRPC to implement a custom way to inform the frontend from the backend, so that the frontend can invalidate the data cache
From my perspective, this possibility is an essential feature of a library like tanstack query. Without this, I see that the usage is almost limited (at least in my scenario: getting real-time data from the field, every 50 ms)
helpful-purple•12mo ago
I doubt this can be delegated to tanstack query, tanstack query does not know when your server data changes, it can only know when it's cache changed. You'd need to implement this system yourself. Also, data usually changes on mutations, so a good pattern is to invalidate queries on mutation calls. If your data changes from other sources, just setup SSE, a websocket, or any other realtime communication solution to notify your frontend to invalidate the queries. This problem also gets more complicated when you need to send the event to only a subset of the clients.
like-goldOP•12mo ago
Thanks @ferretwithabéret I understand your point
You gave me the confirmation that tanstack query is cool, but it needs a companion "library" to be used (almost in my scenario)
Probably, tRPC is the answer because it's only one library that "puts together" tanstack query + the necessary backend side
For sure I can aboid the "companion" library if I setup a custom SSE-based communication
It's always nice exchange ideas with other experienced developers. Thanks