English versionEN

Get Rid of Your API Schemas with tRPC

Do you know we can replace API schemas with a lightweight and type-safe library? With tRPC you can easily replace GraphQL or REST with inferred shapes without schemas or code generation.

This talk has been presented at React Summit 2023, check out the latest edition of this React Conference.

Watch video on a separate page

FAQ

The main focus is on introducing TRPC as a tool to eliminate the need for generating API schemas and TypeScript types, thereby simplifying the development process.

The talk mentions two common methods of server-client communication: the OpenAPI initiative and GraphQL.

The major challenges include the need to learn new specifications, generate TypeScript types, and maintain type safety, which can be cumbersome and error-prone with frequent API changes.

TRPC eliminates the need for manually generating TypeScript types and ensures type safety by default, leveraging TypeScript's ability to extract the shape of objects to simplify API development.

Prisma is a database library used within the TRPC framework to facilitate communication with the database, enhancing the ease of database operations in the application development.

TRPC offers several advantages including no need for code generation, type safety by default, and improved collaboration between frontend and backend developers.

The limitations include the necessity of having a TypeScript stack both in frontend and backend, the need for implementing custom code for versioning or selective field features, and using an external library for exposing APIs publicly.

The speaker is a full stack developer working for CloudAnet, known by the handle Giorgio_Boa. They can be contacted via Twitter and LinkedIn.

Giorgio Boa

11 min

06 Jun, 2023

Comments

Video Summary and Transcription

This talk introduces TRPC, a tool that eliminates the need for API schemas and simplifies communication between server and client. It explores the use of TRPC in a Next.js application, showcasing how TypeScript and Prisma are utilized. The immediate feedback and backend debugging capabilities of TRPC are demonstrated, highlighting its advantages and drawbacks. Resources for further exploration are also provided.

Available in Español: Elimina tus esquemas de API con tRPC

1. Introduction to TRPC

Short description:

This talk is about getting rid of API schemas with TRPC. There are two ways to communicate from server and client: open API initiative and GraphQL. Open API requires learning a new specification, creating a case-sensitive JSON or YAML file, and generating TypeScript types. GraphQL also requires learning a new specification and generating TypeScript types. These processes can be a pain to maintain. TRPC is an amazing tool that solves these problems. It's a popular library with impressive stats on GitHub and NPM. TypeScript allows us to extract the shape of an object.

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.

2. Exploring TRPC in a Next.js Application

Short description:

This part explains how TypeScript allows us to extract the type from a job object and how TRPC is based on this type. The speaker then demonstrates a Next.js application using TRPC, Prisma, and the app router. The app router contains methods for listing, adding, and deleting authors, with Prisma handling the database logic. Zod is used for server-side validation, and the client part includes an API endpoint for communication. The speaker concludes by showing how to perform queries and mutations in the Next.js application.

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.

3. Exploring Immediate Feedback and Backend Debugging

Short description:

This part explores the immediate feedback provided by TypeScript when making changes in the backend that affect the front-end. The speaker demonstrates a basic application where authors can be saved and deleted, with HTTP requests being made and breakpoints used for debugging. The backend is also explored, with a deep dive into the server part and the procedures involved. The pros and cons of TRPC are discussed, along with resources for further exploration.

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.