Chris Bautista: Making typesafe APIs easy with tRPC

Hi, I'm Trash, and so are you. Do you think that's too much? Can I say that? (static scratching) Hi, I'm Trash and I'm a Senior Software Engineer at Netflix and today I'm gonna be talking about making typesafe APIs easy with tRPC. So before we dig in, let's address a few things. First, it's no secret that thanks to API routes, building full stack applications is easier than ever. We can all probably call ourselves full stack developers.

- [Narrator] Wow! - In all seriousness, API routes are amazing. Second, API routes allow us to build very fast. But with great speed comes great responsibility. When interfacing with the APIs, it's really easy to make silly mistakes. Take a look at this URL. Do you really expect me to memorize any of that? Not a chance, but seriously, this is where types come in. They keep you on guardrails and gives you that auto completion capability that saves you from silly mistakes. So the idea of typesafe APIs is isn't really new and has some solutions that exist today.

For example, GraphQL CodeGen, CodeGen with open API. But if you listen closely, the word that I'm kind of repeating here is the word CodeGen. And what this means in the examples that I just mentioned is that it's effectively a build step that generates types based off of your GraphQL schema or your open API spec. And to be honest, these solutions are pretty good. I actually use GraphQL CodeGen at work and it does this job fairly well. What if there's a better life waiting for us out there? What if we didn't have to do this code generation step? And that's why I'm gonna talk to you today about the power of tRPC.

And tRPC is a library that allows you to build fully typesafe APIs without any schema or code generation. Enough talk, let's jump into a code demo so I can actually just show you. All right, so I'm gonna be demoing a Next.js application, leveraging tRPC. VM, by the way, if you guys didn't notice that. All right, so let's go ahead and open up this application. It's really not much going on here. I think we have like, let's see, one, two, three, four files. And what I really want to display here is just how easy it is to set up tRPC in your Next application

and then the value you actually get out of it. 'Cause I think it's pretty mind blowing, to be honest. All right, so let's jump into the _app file here. Nothing should look out of the ordinary here. It's a very simple file. The only thing that's going to look brand new here is going to be this withtRPC HOC that's wrapping MyApp, 'cause that's coming from this tRPC object. If we go into here, this tRPC object is really where we're gonna do the configuration for tRPC. And all this is is just a simple object that has a config callback in it. And in this config callback is where we're going

to find our configuration that we want. For this example, we have a really barebones one. So here we just define a links property here and inside our links we're defining an httpBatchLink. If you're wonder batching is, it's effectively just taking multiple queries and grouping them into one request. You don't have to do this, but I personally think this is a great thing to use, so I'm just using it for this example. Let's go ahead and see how we can set up the tRPC server. So we're gonna go ahead and go into the API route of tRPC here

and this is where we're gonna initialize everything. So down here we can see that we just initialized tRPC with initTRPC.create, pretty straightforward. So here is where it gets a little bit more interesting. We're actually going to define our app router right here. And within our app router, we're going to define a procedure. And procedures can be viewed much like REST endpoints. So here we're going to make a greetings procedure, or rather a query, and this kind of maps to something like this. api/tRPC/greetings, right?

So with that model going forward, let's continue. So with this procedure we're going to say this is gonna take an input. And this input is really just a contract that this endpoint's going to take. So greetings will have a contract of an object that has a name property of type string, right? And then down here we're gonna say that it's in a query. And a query is just simply an HTTP GET request. And this query is gonna take a resolve function here. And this resolve function is going to take the input that we defined here.