Example for tRPC, stable version, with RSC
Hi
This may be a stupid question...
The readme of the experimental example mentions
Note You can already use tRPC with app directory, by: using @trpc/client directly in components (both RSC and non-RSC) use @trpc/next for client componentsWhat do you mean by this? Do you have an example for that using the current stable version of tRPC? Especially the part for the RSC components. I currently wouldn't mind to use tRPC in a non-optimal RSC way. But I would like to use Next's app directory to colocate files (and not having to have code in a completely different
pages directory).2 Replies
what do you miss from tRPC when using RSC?
if you're only doing a web app
I think I'm just confused on what works right now (stable API) and what is actually experimental.
As I understand it, in an RSC you do
const data = await myServerFunction(); return <div>{data}</div> and it will be rendered on the server. How can I do this with tRPC? Do I need to use experimental_createTRPCNextAppDirServer so I can stuff like await api.greeting.query({ text: 'from server1' });?
Or can I use stable APIs to achieve the same thing?
I'm probably just misunderstanding the relationship between tRPC, RSCs & client components ...
As I understand. The new RSCs run on the server, and we can do async calls right inside the component - to e.g. fetch something from a database. This means I can just import the function that queries the DB. Also, those components get streamed to the client, so loading can happen in parallel afaik.
But whenever I'm in a client component, I need to go over HTTP, meaning I cannot just import the function, I lose all type safety 😦 -> tRPC solves that 😀
So, if I want to do the same query in an RSC and a non-RSC, I want to use tRPC because of the type safety. What's a good way to do that? Should I just extract the body of the query/mutation into a function, so I can import it in the RSC and use tRPC's ...useMutation hook in non-RSCs?