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
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 :)
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.
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!
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.
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.
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!
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 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 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
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.
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!
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.
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!! 👍
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!
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?
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!
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?
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...
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!
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.
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.
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 .
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.
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.
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
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
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.
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!
I just started using tRPC and this explains every question I had with how it works! Amazing and informative video!
Great video man! Got to learn so much about trpc, I was so much confused before this video. I love you brother.
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
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! 🙏🏻
great video!
thanks for plugging my talk ❤️
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!!
amazing tRPC explanation! thanks for your time and that great video!
Awesome video! This video made me understand trpc a lot better!
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.
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.
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.
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!
Thanks for the explanation! Really help me to get better understanding of TRPC flow in 20 minutes, keep it up 🔥
This was the video I needed. Thorough explanations. Great pacing. Clear diagram. Thanks!
Brilliant video. Very glad to have found this.
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 is the explanation that I was looking for. 🙏🏻You are a gem. 🙌🏻Subscribed! 😁
now this is beautiful. never knew about timing middlewares & output constraining. awesome video cje. 💙
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 🙂
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 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 love this video. I hope you make more because this was very insightful.
Thanks for this video, it's awesome, I hope to see more in-depth videos, keep up the good work
Thank you gor this great video! Really enjoyed watching it and learning on the way
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.
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!
Soooooooooooooo useful, Thank you so much!
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.
would love more explanations like this
great video. thank you! more would be great on the more advanced implementations.
Can't wait for T4-Stack
Great explanation !!!
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!! 👍
Great Video, more of this.
Erlich gut gemacht 😉
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!
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?
This is so awesome
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!
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?
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...
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
Insanely usefull
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!
underrated
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.
That thumbnail is wild man. Lmao
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.
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!
Thanks for the video, very clear!
Is there any guides how we can use SSE together with tRPC \ next js?
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
helpful for someone who is frontend 😂
Thanks!
Good stuff sir
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 a lot!
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.
thanks!
Great!
Great vid ❤
👏👏
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
trpc is just another patch for nextjs's missing feature e2e typesafety.
I invite you to Sveltekit.
Subscribed
I followed everythin until the 16th minute. Too in depth for me for now zzz. But amazing video. Going to bookmark.
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 😢