Get Rid of Your API Schemas with tRPC

Hello, everybody, welcome to this talk. This talk is Get Rid of your API Schemas with TRPC. So basically I want to start this talk with schema spadix.

So we have two ways to communicate from server and client. We have open API initiative, and we have graphQL. Let's start from open API. Open API, basically, if you are new on this technology, is a new specification to learn. So you need to learn verbs, POST, GET, PATCH, DELETE, and so on and so forth. You need to create a case sensitive JSON and YAML format. So you need to create a file, or more or less a more file, to describe all the APIs. And then from this file, you have to generate the TypeScript types. So if you want your client to be type safe, and TypeScript allows you to basically understand what are the API, you need to create all the types.

Okay, with GraphQL the other side is we need to understand the GraphQL format. So it's a new specification to learn. Okay, again, you need to learn query, mutation, and all the things that GraphQL needs. And then you need to generate TypeScript types again. So this is a big pain for OpenAPI. And GraphQL is a pain to generate every time you change something in your API, generate these types to be type-safe in the front end part.

So basically I'm working for CloudAnet. It is a consultancy company. I'm a full stack developer. My handle is Giorgio underscore Boa. You can find me on Twitter, on LinkedIn. I used to post and repost the article about front end. So if you want to follow me, I'm really happy about it. And I'm investigating a lot, how to prevent this struggling for the generating the API and types. And I found in TRPC, this amazing tool, a new way to prevent all these problems. So this library is quite popular, more than 25,000 star on GitHub and 220,000 weekly NPM download. So it's really impressive. So, all the library is based on these type of, so TypeScript give us the possibility to extract the shape of an object.

So this is a job object, and you can extract the type from these object, and you have my type that has a first name and last name to string. So TypeScript give us this possibility, and TRPC is based more or less on top of this type of.

So, let's jump to a demo. Here I prepare Next.js application, and instead of package.json, I include TRPC, TRPC server part, and client part. Okay, and for the database, I include also Prisma. Prisma is a really great library to communicate with your database.

Okay, let's dive in into the project. So instead of a source server routes, we have these particular type of, we saw before in our slides. So we extract the shape from this app router, this app router is a big router. So you can split your mini routers with all the logic. So you can create your to do router, like to do router to split many other things. And let's jump into the app router. The app router here.

Okay, we have a lot of methods, so we can list all in this case the authors. We can add an authors. And then we can delete an author. Okay, so here in this part, we are putting our logic. So our Prisma logic, so we can interact with the database. Okay, so now we create the router and then we have our Prisma model. So the author with first name, last name and country. Then for the server part, we have also Zod. This is a great library to prevent a problem with object. So we are parsing an object, to verify that the shape of the object is really the same that we want. And then we have our client part. So we have API, so we have an endpoint. We are exposing this endpoint to communicate from client and server. Then we can finally create our next application, our next route. So inside of this next route, we can use a query. So we want to grab all the authors, we can mutate them, we can add, and we can delete. Okay, so basically here, you can see that if I do like this, so ctrl space author dot add, delete, and list.

Okay, so if I jump into the description of this API and I change something, immediately in the front-end, so if I change something in the backend, immediately in the front-end TypeScript say to me, okay, you are doing something wrong. And this is a great thing because we didn't basically generate any kind of type, but out of the box, TypeScript give us this possibility.

Okay, so we can, okay, we can do like this. Again, I run a server to show you the application. This is a basic application, so we can save authors and delete authors as well. If we inspect our network tab, we can see that every time I click save, we are doing an HTTP request. And if we look into the source code, if I put a breakpoint inside of the library, here we are inside of trpc slash client slash dist, so the file inside of the library, you can see that if I click save here, I have a breakpoint in my Visual Studio code, and basically we are calling slash API slash trpc author list to grab all the authors. We are doing a query, so query is a get, mutation is a post, then we have a signal to abort the fetching. And if I run again my code, you can see that we are adding an author basically.

Great, so I want to deep dive also into the backend part so if we put inside of the other file, here in the author, I can put a breakpoint here in the add part so I can save. And then here in the left part I can inspect the stack of the calls and we can jump into the server part. So trpc server, I encourage you to debug the library, not only this one, but library in general, to understand how it works under the hood, it's really fun. And as you can see, if we save something, again, I think we are in the breakpoints, maybe we can go on a little bit. You can see that here we have our information and instead of this OPTS we have these procedures. We have the Add, Delete, List, great. And we have also our files. So our definition. So this is our code. Great. Let's jump again to the slides.

So there are a lot of pros about TRPC, no code generation. We have TypeSafe by default because we use TypeScript and we can collaborate better between the frontend and the backend. There are a few cons. We need to have a TypeScript stack, frontend and backend in TypeScript. Monorepo fits really well with this library, but you can have also multi-repo. If we want to have versioning or selecting field feature, we need to implement our own code. And if we want to expose our API in the public, we need to use an external library, trpc-openAPI. Well, let's summarize a little bit with this website. You can start with a fresh application with Prisma, Next, Tailwind, and Next.js, of course. Who is using trpc in this issue? You can find a lot of company that are using trpc, and now it's your turn. Let's try it out. With this website, you can find a lot of collection and resources about trpc. Thanks for watching. You can find me on Twitter. My handle is giorgio underscore boa. Have a nice conference.