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 talk mentions two common methods of server-client communication: the OpenAPI initiative and GraphQL.

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.

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 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.

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.

Giorgio Boa
Giorgio Boa
11 min
06 Jun, 2023

Comments

Sign in or register to post your comment.
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.

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.