T
tRPC

Example for tRPC, stable version, with RSC

Example for tRPC, stable version, with RSC

Mmichaelschufi7/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
Mmichaelschufi7/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!

T
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 boSometimes invalidate not work...hello sometimes invalidate method does not work in `onSuccess` anyone same? using NextJS, pnpmtrpc client request size limits?I am sending a pretty sizable request and am seeing ``` [TRPCClientError: JSON Parse error: UnexpecMake 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 thereUsing 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 } fuseSubscription simplified with react queryHi Guys, looking for a way to simplify the use of useSubscription. Currently I do the following: 1Next.js app router catch-all HTTP methodsThe app router already supports the catch-all file for route resolution, but AFAIK still expects sepTRPC 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 thMultiple 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 adKeep 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