Learn tRPC In 45 Minutes

Рет қаралды 101,587

Күн бұрын

Highlight: app.highlight.run/?promo=SIMP...
Coupon Code: SIMPLIFIEDHIGHLIGHT (This should be automatically filled in as you go through the signup process)
tRPC is an incredible library that makes working between your client and server so much nicer. The best part of tRPC is how it brings type safety to your API and client interactions which is something I have never seen done before (especially so well). In this video I talk about everything you need to know about tRPC.
📚 Materials/References:
What Is tRPC Video: • Is tRPC The End Of RES...
Zod Crash Course Video: • Learn Zod In 30 Minutes
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:20 - Sponsor
01:22 - What Is tRPC
02:35 - tRPC Basic Usage
13:10 - Code Cleanup
15:23 - Routers
18:04 - Procedures
23:42 - Context
28:00 - Middleware
32:14 - Client
35:00 - Web Socket Subscriptions
#tRPC #WDS #JavaScript

Пікірлер: 103

@WebDevSimplified Жыл бұрын

Highlight: app.highlight.run/?promo=SIMPLIFIEDHIGHLIGHT Coupon Code: SIMPLIFIEDHIGHLIGHT (This should be automatically filled in as you go through the signup process)

@gzucca 5 ай бұрын

Man, I never get tired of your videos. Your explanations are so clear and to the point, plus they always have tips such as folder organization. Keep up the work!

@chrisfaux3769 Жыл бұрын

Thank you Kyle. tRPC was the part of the t3 stack I struggled the most this week and this video helped me so much. Would you mind making something like this about the t3 stack?

@theisoj Жыл бұрын

Thanks once again Kyle for this tRPC tutorial. I'm going to learn about this on Friday or Saturday evening.

@techwithattila Жыл бұрын

Really interesting to see how many traditionally "backend concepts" break into the frontend world. It's a welcome change though, everyone is looking for less error-prone code 🐞

@StrayKev Жыл бұрын

Thank you. tRPC is something I have always wanted to learn about.

@clarkhinchcliff7824 Жыл бұрын

Perfect, just when I needed it! Thanks so much for this.

@SteveBoyer10 Жыл бұрын

Dude just been looking to learn this and boom, here's your video. Gracias sir.

@OtterSwims 5 ай бұрын

The last part about websockets was something i really needed, thanks for making this explainer.

@macctosh Жыл бұрын

very efficient tutorial.... love this style.

@stevepr7430 Жыл бұрын

Thanks, this video is the best support to tRPC docs.

@DavidBowmanJr Жыл бұрын

I asked for this, and it happned. Thank you :)

@nicolasbatistoni2036 Жыл бұрын

Thanks! Great explanation!

@MattBodman 3 ай бұрын

Excellent tutorial, thanks!

@VladdyHell Жыл бұрын

It would be cool if you make a crash course for t3 stack too

@pablom2274 9 ай бұрын

At min 16 coding along just amazed how good this is

@alirashad23 Жыл бұрын

that was so helpful for me thank you

@farazayaz2526 Жыл бұрын

❤ Love you man!

@metalsadman Жыл бұрын

thanks,. that's really cool way of doing things syncing frontend requests wiith serverside is godsend. i hope trpc gets more traction and adoption.

@elonmask7271 Жыл бұрын

Was actually waiting for this. Thank you so very much.

@satvik0099 7 ай бұрын

Your explanation is next level as usual ♥️🌟 But I request you to make a video of how to apply TRPC in real world applications . Also the application of web sockets is needed because without that it seems to be empty

@TON_NOT_Fan 11 ай бұрын

T3 stack tutorial needed!

@faizanahmed9304 Жыл бұрын

Wooo thanks man!

@juanisimioli Жыл бұрын

Kyle, I need some solidity videos from you! ❤🧡💛💚💙💜

@firewatermoonsun 11 ай бұрын

Thank you so much buddy!

@jeromemanceau4263 Жыл бұрын

Thanks Kyle!.. just wanted to also review Prisma and... look at that, you have a tutorial about Prisma as well :D

@navneetpatel6193 10 ай бұрын

Thankyou soo much Kyle.

@ayushdedhia25 Жыл бұрын

I think tRPC can be the new standard for building APIs!! 🤔

@mediocreTyler Жыл бұрын

Thanks Kyle

@hd.r6545 Жыл бұрын

Thank you for posting such great content! I learned a lot from all of your videos. They are really really helpful. And I am also shocked you can talk and code at same time keep everything on the track. Is there way to practice such ability ?

@ChristopherPhillipsDev 9 ай бұрын

He's got the ready made code on another monitor that he's already proofed. You can tell because he looks to the side before he writes something new.

@rukeeojigbo2221 8 ай бұрын

Thanks a lot

@Michael-Martell Жыл бұрын

So, with this and the prisma course, are you leaning towards T3?

@MueezKhan1 Жыл бұрын

Thanks! Thoughts on create-t3-app?

@PartneredBrands 2 ай бұрын

Kyle hi love your vids! Can you do one for auto-gen of unittests using plawright and also generates interactive swagger docs from any nextjs app that uses zod, lucia and trpc?

@eleah2665 Жыл бұрын

Hi Kyle. Thanks for this. Is the code available somewhere? I don't see it in your github repository.

@rolandfancier3666 Жыл бұрын

thx for your tutorial~ but how can i get the demo you show in the video？

@wavyboyjodii 3 ай бұрын

thanks bruv

@mahboobmohammad1868 Жыл бұрын

Out of curiosity, why don't you use node --watch instead of nodemon

@AZ-kh9ex Жыл бұрын

If we are importing AppRouter from server into client, I am unable to understand how are we going to deploy this. We can't deploy react and nodejs separately in this case, right? Please help

@diegoalairelibre Жыл бұрын

¡Gracias! Thanks

@WebDevSimplified Жыл бұрын

¡De Nada! You are very welcome.

@davidmuturi2078 24 күн бұрын

Anyone watching this anytime from now , you should know that the trpc is now v11 while it was v10 in this video so check the documentation

@youngcoding5055 Жыл бұрын

Kyle, can you make a video Abt how to live preview a website template, live bootstrap themes? Please bro.

@plasmadice Жыл бұрын

I have watched several of your videos. You don't waste time. So when I saw that this video was 45 minutes I decided to leave this comment and go to sleep. This can wait until tomorrow.

@yaroslavozerov1121 Жыл бұрын

1. Every tutorial Kyle creates - always it seems like he knows it since his childhood. You even don't make a pauses to think or to remember something...I have no clue how is it possible at all xD 2. I still didn't get why do we need at all such complicated stuff as tRPC :(( I didn't saw many benefits

@unhandledexception1948 8 ай бұрын

would it be reasonable to think of this as alternative to React Query ?

@RomanOstolosh 10 ай бұрын

13:44 Is it possible to create several routers though and attach them to different endpoint to separate between the apps in a more complex setup? Or it's a technical limitation of TRPC?

@pablom2274 9 ай бұрын

I'm at min 16 right now but I just did what you say and it works, you just have to create another "client" in the client side and pass the router to the createTRPCProxyClient function.

@TariqSajid Жыл бұрын

i would awesome if we can you this in a separate backend and frontend like php backend and react js frontend

@cruz.aljon1990 Жыл бұрын

Should the server and client in the same server?

@leomangold 2 ай бұрын

Is the code available in some kind of repo anywhere? I'm having troubles with setting up the server and would want to know whats inside of the package.json files and stuff

@JokeryEU Жыл бұрын

thank you, was thinking of looking to learn more about tRPC :D to use it in my nextjs project

@cirex314 Ай бұрын

5:33 is throw new TRPCError() not applicable here?

@BarisPalabiyik Жыл бұрын

Yes, I am glad it's getting popular. It's an amazing magic.

@farzadmf Жыл бұрын

NICE! I'm wondering if tRPC and gRPC can be used together 🤔

@aseemanand1 Жыл бұрын

What if backend and Frontend have separate repos

@chanmyaemaung Жыл бұрын

Awesome!!!

@pablom2274 9 ай бұрын

33:00 should I worry about sending 'Content-Type': 'application/json' ??

@oleh1 8 ай бұрын

No. TRPC does it for you

@llmaboi Жыл бұрын

Instead of using cors in the server use a vite proxy less packages and very easy to configure

@ts8960 Жыл бұрын

no. cors is the easiest thing in the world to configure

@cxreed Жыл бұрын

what if i deploy on vercel but different repo? is it possible?

@metalsadman Жыл бұрын

both needs. to be. in the same repo it seems.

@cxreed Жыл бұрын

@@metalsadman so, how structure project look like?

@ToddDunning Жыл бұрын

Mmmm I glazed over at about the halfway point. It would help me to get more of an architectural outline and the project context in the beginning. You do a great job flying through the code but I'm losing it figuring out the context of each function; when to do what and why. Longtime subscriber and fan here.

@pablom2274 9 ай бұрын

30:20 how was the normal way??

@zombiefacesupreme Жыл бұрын

9:19 Can you not use top level await here?

@douglascounts4634 Жыл бұрын

Using await at the top level requires a lot of changes to your "package.json" and your "tsconfig.json" files. Most of these changes involve forcing node to use newer module types and break a lot of other libraries that you may have in a larger project. You can't use node's popular "require" function for example to do imports.

@zombiefacesupreme Жыл бұрын

@@douglascounts4634 thank you so much for the detailed answer. I had some issues with the compiler yelling at me about that and that makes total sense in that context. :)

@JukeboxForArtists 22 күн бұрын

Are you still using this or have you moved to server actions? Would be cool to see you create a project using this!

@WebDevSimplified 22 күн бұрын

I have a Twitter clone using tRPC. I have tried moving more to server actions, though, as they work well in many situations.

@MeraTVi Жыл бұрын

Supabase crash course in 45 minutes. Will you make it ?

@masuya444 Жыл бұрын

Is this trpc v10 tutorial?

@cherubin7th Жыл бұрын

You must put a privacy policy on your website when you use that and disable it if the user disagrees in the EU.

@vrechko Жыл бұрын

source?

@Fuzbo_ Жыл бұрын

@@vrechkomaybe they’re talking about the Highlight sponsor? I don’t see anything online related to tRPC needing to be put into the privacy policy

@vrechko Жыл бұрын

@@Fuzbo_ Yeah might be it. Was genuienly curious if that was true.

@spinix3744 3 ай бұрын

so it is tightly coupled

@ts3798 Жыл бұрын

Didn't know Robert Paul Champagne was in web development.

@satvik0099 7 ай бұрын

Why not in next js 😭

@t3dotgg Жыл бұрын

o n e o f u s

@dt7472 Жыл бұрын

It reminds me apollographql

@rajnishsrivastava4231 Жыл бұрын

Theo pushed trpc alot

@metalsadman Жыл бұрын

it's great tech so understandable. problem I'm seeing is when working on a team where peeps work on different repo for backend and frontend.

@firewatermoonsun 11 ай бұрын

I watch at 0.75 speed))

@TsoiIzAlive Жыл бұрын

Gains are noticeable 👍

@tariqal-malki8401 Жыл бұрын

Who gave you the black eye??

@Zagoorland Жыл бұрын

New hair, who dis

@rhul0017 8 ай бұрын

People hate angular and all other frameworks settle down to patterns from angular!!!

@oleh1 8 ай бұрын

how is trpc a pattern from angular?

@jamesselene Жыл бұрын

The single repository makes this a non-starter for many. Especially larger team projects.

@adambickford8720 Жыл бұрын

"Impossible" even though we were doing it 20 years ago, in java of all languages (yes, type safe to the client via cross compilation; gwt was exciting back when google was credible) There are *HUGE* downsides to this tightly coupled monolithic approach and being JS/TS isn't even one of them! If you need to mash out a simple app in a week or 2? Great. Need an app that will more than a year or 2? Not so much.