Why are we devs so obsessed with decoupling things that are coupled nature? tRPC is a library that replaces the need for GraphQL or REST for internal APIs. When using it, you simply write backend functions whose input and output shapes are instantly inferred in your frontend without any code generation; making writing API schemas a thing of the past. It's lightweight, not tied to React, HTTP-cacheable, and can be incrementally adopted. In this talk, I'll give a glimpse of the DX you can get from tRPC and how (and why) to get started.
Full-stack & typesafe React (+Native) apps with tRPC.io
AI Generated Video Summary
Alex introduces tRPC, a toolkit for making end-to-end type-safe APIs easily, with auto-completion of API endpoints and inferred data from backend to frontend. tRPC works the same way in React Native and can be adopted incrementally. The example showcases backend communication with a database using queries and validators, with types inferred to the frontend and data retrieval done using Prisma ORM.
1. Introduction to tRPC and API Development
Hello, I'm Alex. I'm here to talk about full stack, React, and tRPC. I've been making websites for a really long time and been working with React since 2016 or so. I'm here to introduce tRPC, a toolkit for making end-to-end type-safe API in a very easy manner. When you write tRPC back-end, you have a router where you nest all your queries. And when we use this in our front-end, we get auto-completion of all our API endpoints and the data inferred from the function in the back-end to the front-end.
Hello, I'm Alex. I'm here to talk about full stack, React, and tRPC. I've been making websites for a really long time and been working with React since 2016 or so. I've also worked a bit as an iOS developer and whatnot.
And today I'm here to talk about APIs. I know this is a Content Conference, but just bear with me. You'll realize it's not that hard. So, to break it down, let's start with the question, what is an API? So, in the context of HTTP, very simplified, an API is just a way of calling functions on another computer. And the way we make and use APIs today might look something like this. We start with an API contract or schema, because we want to have some guarantee that our API is actually returning what we want it to return. And then we might do some code generation in order to help our back end logic on what it needs to return. Then once we've done our back end, we write an API query on our front end. Which then might have some code generation attached to it to generate a nice use query hook that we can use at the end. So, I think there's quite a few steps to doing an API today. And the reason for this, as I see it, is that we have decoupled our back-end and front-end completely, or rather that we have made them disjointed. But what if our back-end and front-end didn't have to be decoupled? There are tools today where we can write the same sort of language on the front-end and back-end and mobile. And one of those tools is TypeScript. So, TypeScript is a good language which you can use everywhere, and I've been working hard over the last ten months to create some set of tools to simplify the sort of API development with your React apps. And, yeah, I'm here to introduce tRPC. tRPC is a toolkit for making end-to-end type-safe API in a very easy manner. I'm just going to dig in to show you how it looks like. So, when you write tRPC back-end, you start something like this. You have a router where you nest all your queries. Here is a query called hello. We call this a procedure in tRPC. You can also view it as an endpoint. And all that this function does is to return some data. And when we then use this in our front-end, we get straightaway auto-completion of all our API endpoints and we get the data inferred from your function in the back-end to your front-end. And this doesn't rely on just a bit of an abuse on the TypeScript compiler. And it's a thin wrapper around ReactQuery.
2. tRPC in React Native and Complex Example
tRPC works the same way in React Native. You can adopt it incrementally or not at all. In this example, the backend communicates with a database using a post by ID query and a validator for input data. The types are inferred to the frontend, and the ORM Prisma is used to retrieve data from the database.
And what you see here works exactly the same in React Native. And if you want to, you can incrementally adopt tRPC to your project, or you cannot use it at all if you don't want to. So let's see a bit more complex example. Here we have a backend that is actually talking to a database. So you can see here that we have a post by ID query, and that takes some input data through a validator, and you can see that the types of that validator is inferred straight away to the front end. And then at the end, you can see that we are talking to our database through an ORM called Prisma, and that gets some data back that is also then inferred straight away on the frontend.