Example for tRPC, stable version, with RSC

Mmichaelschufi

7/21/2023

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 components

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

AKAlex / KATT 🐱

7/21/2023

what do you miss from tRPC when using RSC? if you're only doing a web app

Mmichaelschufi

7/21/2023

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?

Looking for more? Join the community!

tRPC

Example for tRPC, stable version, with RSC

Join Server

tRPC

Example for tRPC, stable version, with RSC

Join Server

Recommended Posts

Dynamic return typeIs there any way to have dynamic return type with tRPC? Simple example: If I provide x: true on bo Sometimes invalidate not work...hello sometimes invalidate method does not work in `onSuccess` anyone same? using NextJS, pnpm trpc client request size limits?I am sending a pretty sizable request and am seeing ``` [TRPCClientError: JSON Parse error: Unexpec Make tRPC return Bad Request on Zod validation error?As the title says, how can I make tRPC return a proper error message, like a Bad Request, when there Using proxyClient in vercel edge functionHey guys, i want to call my trpc apis inside vercel edge functions. Edge runtime does not have all cookies not being set in procedureThis is all the code for setting my cookie ```js import { publicProcedure, router, userProcedure } f useSubscription simplified with react queryHi Guys, looking for a way to simplify the use of useSubscription. Currently I do the following: 1 Next.js app router catch-all HTTP methodsThe app router already supports the catch-all file for route resolution, but AFAIK still expects sep TRPC Vanilla Client (T3 stack)I'm using the T3 stack (Next + TRPC + etc) and I'm trying to figure out how to do vanilla queries th Multiple Inputs on TRPC Procedure?Essentially I'm trying to pass a cart (array of objects) into a public procedure (doing so fine). I adapter for hono or hattip?we’ve got adapters for express, stand alone node and next. I wonder how easy would it be to make ad Keep getting 500 error response I can't figure outWith both queries and mutations I get back this response saying that there's html in the response an