How tRPC really works
Вставка
- Опубліковано 22 сер 2024
- Larger version of the diagram: c-ehrlich.dev/...
This video explains tRPC from an app developer's perspective.
Resources:
tRPC: github.com/trp...
tRPC Docs: trpc.io/docs/
Create T3 App: github.com/t3-...
Chris Bautista's 🚮 NextConf Talk: • Chris Bautista: Making...
My links:
/ ccccjjjjeeee
github.com/c-e...
Thanks to Sachin, Julius, and Alex from the tRPC team for the help with creating this :)
this is insanely helpful, I didn't expect to come out of a 20 min video learning so much. Love how you turned a monster of interconnected system into an approachable diagram, keep it up man
Great overview of the whole flow! Really enjoyed watching this one
Incredibly insightful video! The diagramming of the full process along with walking through code was incredibly effective, and makes so much about the TRPC callstack clear and comprehensible. Thank you for making this vid, keep it up CJE!
Great video thanks! I've been using ct3a to build all my companies applications but now have a good bit of confidence of how all the trpc magic works. Will be making some middlewares this week!
Man, thank you for this - I think a written article for this would kill as there is no single source (except for tRPC docs) that thoroughly explains how it really really works and I was having a trouble to wrap my head around it.
Thanks! I'm currently brainstorming with the tRPC team on how we can improve the docs to make everything more approachable. But maybe an article is a good idea as well :)
@@ccccjjjjeeee Is there a way to contribute?
I think videos are great with explanations, but for some people reading helps as you can also go at your own pace.
I suppose there is no right or wrong here, just an idea :)
@@kirso there's a docs channel in the trpc discord
This is an awesome video! Came here from the trpc docs just to understand how it works under the hood and got exactly that. Thank you! 🙏🏻
Awesome video! This video made me understand trpc a lot better!
Great video man! Got to learn so much about trpc, I was so much confused before this video. I love you brother.
amazing tRPC explanation! thanks for your time and that great video!
For such an amazing video the screen being hard to read on mobile sucks. Keep up the great content. The most informative TRPC on how it works I've ever seen.
thank you a lot. This is incredibly helpful. Videos like yours enable me to move forward in this field of programming. Going through all of this only with the tRPC docs would have probably taken me weeks or made me quit :D
WOW! I feel extremely confident that I know what each piece of tRPC does now, and I could *not* say that yesterday. This was just as thorough as it needed to be without getting weighed down by explaining too much of the internal processes.
Absolutely fantastic video! You can tell that you put a lot of thought into this.
Brilliant video. Very glad to have found this.
I just had to click on this thumbnail 😂
But besides that awesome video, perfect level of depth imo. I was happy to learn that there wasn’t an unfathomable amount of hidden magic (at least not more than a 20 minute video) that explains how trpc really works.
This was a pretty thorough explanation. One part I didn't understand is what it would look like for a middleware to do some work on the way back.
I just started using tRPC and this explains every question I had with how it works! Amazing and informative video!
This is awesome. I’ve been using tRPC for a personal project and also a work project for a couple months now and feel much more confident in my knowledge of what felt like magic at the beginning. I hadn’t learned much about middle ware and now have lots of thoughts on simplifying repetitive checks in some of my procedures.
This was the video I needed. Thorough explanations. Great pacing. Clear diagram. Thanks!
Thanks for the explanation! Really help me to get better understanding of TRPC flow in 20 minutes, keep it up 🔥
This is the explanation that I was looking for. 🙏🏻You are a gem. 🙌🏻Subscribed! 😁
This is a great explainer and helps me understand t3 app structure much better, but would be a bit nicer if we had access to the github source code you shared here so we could look at the files ourself to understand better.
Thanks!!
Thank you some much for your videos man, you have no idea how this videos have been helping me. keep up with the great work!!
now this is beautiful. never knew about timing middlewares & output constraining. awesome video cje. 💙
great video!
thanks for plugging my talk ❤️
I already made quite a number of apps with the t3 stack, so it's awesome to see someone with this much knowledge explaining why it works so good 🙂
Thank you so much for making this, you did an excellent job of explaining tRPC. Subscribed only a few minutes in, please keep making content like this. One side note if you are planning on making more videos is to have your code zoomed in a bit more and switch between the view/diagram or whatever else you are displaying. 😊
thanks! i'm planning to make more videos, but at a fairly slow pace, maybe one a month. and yes, things are definitely too small in this video. for the next one, my target will be that it can be watched on an iPad mini without things being uncomfortably small
Damn! This is an excellently made video, thanks for sharing your knowledge
I fell with love with tRPC already from version 9 just by making some hobby projects. I really would like to have a case to use this in a production/business project and see how it goes. The most curious thing for me is using tRPC with WebSockets. Would you like to make an video w/ an example about that in future? I think that'd be a great content. Subscribed and waiting for more. Your explanations are very clear!
tRPC Subscriptions (their WS implementation) are still a bit rough around the edges. This means that for the time being, I'd recommend to implement WS the same way as in any other Node backend: If you're deploying to a stateful server, you can use Pusher Channels for example. If you're deploying to serverless however, you will need some external service like Socket.io.
That being said I haven't actually used tRPC Subscriptions in a while, so it might be worth looking at again.
Great video, It would be great to see a video / example app of the TRPC & NextAuth with NextJs `app` directory. I would like to use it in our next application!! 👍
Thanks for this video, it's awesome, I hope to see more in-depth videos, keep up the good work
I love this video. I hope you make more because this was very insightful.
Soooooooooooooo useful, Thank you so much!
Thank you gor this great video! Really enjoyed watching it and learning on the way
great video. thank you! more would be great on the more advanced implementations.
would love more explanations like this
this is really great! Well explained, I learned so much. exactly what I was looking for thank you. Only your sketch is so small and hard to read. But regardless of that keep it up man!
Great explanation !!!
Really helpful explanation of TRPC! Is there any configuration for TRPC that needs to be configured on the backend? How does this keep our backend typing and frontend typing connected? Does the backend need to exist inside of nextjs still?
tRPC can live inside almost any TS-based backend. It requires a bit of boilerplate to get going, but in the case of Next.js, create-t3-app sets that all up for you. If yo want to learn more, check out Chris Bautista's video that I linked to in the description!
This is so awesome
Insanely usefull
Erlich gut gemacht 😉
Super helpful! Thx! tRPC became much more clear to me! But i still do not understand what "ssr: true" do, how it vibe with gssp, gip, gsp? How generic fetching strategies looks like with tRPC?
I just know about T3 and tRPC. Though I have used gRPC before.
This is awesome.
But I think the gRPC is significantly different from tRPC.
I would like to know if this is correct. Thank you so much for the video. I love it!
Can't wait for T4-Stack
That thumbnail is wild man. Lmao
This was also superb! So freaking helpful! Any chance you would do in the future a similar deep dive about next auth on ct3 app? Regardless, thanks again!
14:00 I don’t really get the going backwards in middleware, shouldn’t `timingMiddleware` print twice (also tried a simple console.log) also can’t find anything about it or FILO in documentation.
think of it as functions calling other functions (because that's what it is). everything before `await next({ ctx })` happens on the way "in" to the procedure, everything after happens on the way "out". So `console.time` runs before the procedure (or next middleware, if there was another one) and `console.timeEnd` runs after it.
@@ccccjjjjeeee gotcha, chained 3 middleware, now I see whats happening.
Can you use trpc without transpiling like an environment ts is not used, jsdoc instead or build step/bundler/transpiling is necessary? For example, you can use zod with jsdoc, is it the same story for trpc?
Great Video, more of this.
I am still wondering how TRPC manages to share types between different codebases say a simple react SPA (not Nextjs) and and express server. How is the library able know about the code in other other codebase ? Is it just that we rely on zod to do checks on both side ? that way we have to remember zod object schema - but I never saw it happening. So still wondering...
It would be great if you done a video to explain how trpc works with nextjs react server components (i.e. when using .query() instead of .useQuery()). I intend to keep using trpc for the forseeable so i can build out a mono repo of all my applications with different clients that share the same backend / auth / types.
Great!
underrated
Thanks a lot!
Should I use tRPC for already existing backend API endpoints on my Next JS Project just for the sake of Type validation on routes & API request/response checks ? Or would it be an overkill and I should just leave it to Zod ? I would love to hear your thoughts on using tRPC for a pre-built (non Typescript) backend .
if you don't need an "in-between" backend (for example for hiding api keys), it probably doesn't make sense in this scenario
Thanks for the video, very clear!
Is there any guides how we can use SSE together with tRPC \ next js?
👏👏
helpful for someone who is frontend 😂
Thanks!
thanks!
6:26 you didnt scroll all the way up, I wanted to see your definition for the type CreateContextOptions to pass the session to the inner context
trpc is just another patch for nextjs's missing feature e2e typesafety.
I invite you to Sveltekit.
yooo, something I could REALLYYY use a video on is how to use tRPC with getServerSideProps(). I want to fetch/post data client side, but there are a few pages I'd like to load data from the server first.
Check back here in a few days ;)
@@ccccjjjjeeee booyah
Super clear tutorial! Thank you for the video! I'm struggling to add ad Authorization header for a WebSocket connection. HttpLink and HttpBatchLink just have a function "headers" that permit to edit headers before each request. The same function isn't available for WsLink. Do you know i could do this? I'm not finding nothing on internet, very strange that nobody need to authorize a WsClient.
any luck on this? I'd like to do the same
Thanks a lot for the video, is it possible to use SSG with tRPC? If i use getSP with the api.example get query for example i need the context.
Check my other video
@@ccccjjjjeeee Thanks!
Good stuff sir
What is the reason of including the DB connection in the context? Doesn't it clutter the context? Instead it could just be cached in it's own file and only init when it's undefined.
What do you mean by “clutter the context”? On a normal server there will only ever be one db connection. It’s passed by reference. In serverless you need to instantiate it on each lambda cold start anyway.
@@ccccjjjjeeee By "cluttering the context" I mean that why doesn't the procedure just get the connection (import, or getConnection() function) but instead it's passed in the context? Only including the things that are dependent on the incoming request would make sense to include in the context, not something that can be imported from the project. I'm trying to understand why including the db connection in the context is helpful.
@@egecavusoglu478 same reason context has the session in it - convenient to just define it once. You can import in each file if you want I guess, it will work also. Also context is convenient when it comes to testing because you can pass mocks etc.
@@ccccjjjjeeee I do agree that context is very helpful, and session has to be included in it since it depends on the incoming request. Prisma connection, however has nothing to do with the session or anything else with the incoming request thus I thought it did not belong in the context. I guess mocking for testing could be a reason how it'd be helpful, thanks for explaining.
Subscribed
I followed everythin until the 16th minute. Too in depth for me for now zzz. But amazing video. Going to bookmark.
Great vid ❤
Anyway you have that exaclidraw saved on your github?
check the video description
@Christopher Ehrlich thanks, lol I'm so blind, I'm going through all 126 repos you have on GH and it was the first link in the description. Haha.
Your voice is Rising and falling in a very interrupting way, try to rectify that.
BTW, this seems good, too bad I can't finish watching it 😢