Learn tRPC in 5 minutes

what's up Wizards today we're going to be looking at trpc we're going to be getting you off the ground with trpc as fast as possible walking through the quick start trpc is a really cool framework for building full stack applications where you can use typescript to link the back end to the front end so you get beautiful type safe communication between your front end and your back end for a really low cost and it's got a reputation for being extremely fast to work with yes I am wearing a scarf it's snowing in the UK today but we persevere let's get started I've taken the minimal example from the docs and I've put it here you can see that it's set up like a little mono repo we have a client which is like the front end and then we have a server which is like the back end let's take a look at this client first we're creating a trpc proxy client and passing it a type of app router this app router is coming from the server and we can command click directly to the server here this takes us to a type which is the app router which is being derived from our router being created by trpc we'll get into what all this means in a minute but you can start to see what what's happening we're creating a router turning that router into a type and then feeding that router into our front end this is trpc's Magic Source by using typescript as the link between your front end and back end you get really really quick development Cycles I've started running a Dev server here and that's going to call Main I'm just running it inside the terminal here not in a front end but this code is perfectly valid on the front end too we're calling client.group.query so we're currently sending that let's send Stefan instead and now our back end is saying hello Stefan let's look at this code side by side we've got the client on the left and the server on the right in the server we're initializing trpc which gets us this public procedure and a router our router lets us specify different methods and the one we've got right now is this greet you can see that there's a little bit of input validation which checks to see if the value is a string and then it lets you take the input and pass it directly into a greeting here so if we change this to goodbye then it should show up in our terminal and there we go we're now getting goodbye Stefan the way this router gets turned into an actual server the with this create HTTP server which comes from trp server adapters Standalone you probably won't be using this in a while this is just for the examples directory I think more likely you'll be using their adapters for different Frameworks if we were to remove this greet query then you're immediately going to see that we get an error over on the left side this is because this client can only call methods that are defined on the right hand side and if we add a new method on the server called say goodbye then we're going to get autocomplete over on the left by saying say goodbye query and then you have to pass it a string let's change the implementation so it says goodbye again and now we're calling goodbye here and it's saying goodbye again Matt we even get type safety on the thing that's returned to let's say we change say goodbye into it being goodbye over on the left it's going to error at us because this should be goodbye one of the amazing things about trpc is that you can jump between front end back end really quickly let's say we're inside the front end here I can command click on say goodbye and I immediately jump to the back end I can then command click here too and I immediately jump to the front end so I can just jump back and forth super quickly you can start to see how focused trpc is on your developer experience let's dive into the server a little bit more to understand it a bit better each of these methods in trpc is called a procedure you can see that the T we create here comes with the default procedure which by convention is called the public procedure this is because we aren't doing any checking of this procedure it's just public open to anyone we then extend that procedure with input and this lets us pass a validation function that's going to check what we're getting is correct by far the most popular way of declaring this is using zot we can import Zod here and then instead of all of this custom function stuff we can just pass zed.string and now the thing that we get in the input is typed as string we can make it pass as an object just by calling Z dot object and now the type of input is going to be input with a name String and again when we go to our implementation then this is going to yell at us until we pass in name blah blah blah so input is a way of specifying exactly what your procedure needs to receive if you don't need to specify an input then you can just say publicprocedure.query and then inside the client you can check it with say generic hello and you won't be forced to pass any arguments and of course it's still beautifully typed safe if we feel that the thing we're creating is more of a mutation than a query let's say we're changing something in the database then we can use mutation instead and now on our client we'll be asked to specify mute hate instead of query so I think at this point we've got a good sense of what trpc is and how it can help now I'm going to show you all the other things that trpc can do just from looking at the docs the first thing I want to talk about is middleware you can call T dot middleware which is where you can do authentication in your system we're saving this in the variable is auth then down here you can see we have a public procedure and a protected procedure and this protected procedure is using is auth so now any protected procedure is going to basically check that the user has a session and inside this mutation you get another field which is called context or CTX the shape of this context is actually inferred by this really nice little setup where you call init trbc context passing the type of the context and then that lose through the rest of your trpc app so that's why you have public procedure as a top level thing here so that you can create different styles of procedures which I think is a really elegant way of handling middleware if you want to try out trpc today then I suggest you use it with next JS that's where their docs are mostly pointing you towards there's a huge big page on usage with an xjs and you should take a look at that and walk through all the steps but as I've shown you you can just use it Standalone if you need to or it has all the pieces where you can integrate it with spell kit with view whatever you're using I realized at some point I must have taken my scarf off because I didn't notice the room was getting so hot in here all this trpc action is just raising the heat levels I'm really really keen on trpc I think if I was starting a new project today I would use it especially if I had control over my front end and back end especially in the same repo so it's really really great for full stack projects you should check out the docs try it with xjs see how all the pieces fit together if you want to learn more about how Zod works then I've got a free tutorial on sort and if you enjoyed this quick start video then make sure you leave a like below I'll have another video that you can watch here and a face that you can subscribe to here thank you so much for watching folks and I'll see you very soon

Channel: Matt Pocock

Views: 100,041

Keywords: typescript, web development, advanced typescript

Id: S6rcrkbsDI0

Length: 6min 3sec (363 seconds)

Published: Wed Mar 08 2023