How, why and how to use tRPC by the creator of it

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.
Transcript
Intro
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 frontend conference, but just bear with me. You'll realize it's not that hard.
What is an API?
[00:44] 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 wanted to return. And then we might write, do some code generation in order to help our backend logic on what it needs to return.
[01:21] Then, once we've done our backend, we write an API query on our frontend, which then might have some code generation attached to it to generate a nice use query hook that we can use at the end.
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 backend and frontend completely, rather that we have made them disjointed. But what if our backend and frontend didn't have to be decoupled?
There are tools today where we can write the same sort of language on the frontend and the backend and mobile. And one of those tools is TypeScript. TypeScript is a good language, which you can use everywhere. And I've been working hard over the last 10 months to create some set of tools to simplify the sort of API development with your React apps.
What is a tRPC?
[02:18] 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 backend, you start something like this. You have a router where you nest all your queries. And here is a query called hello. So 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.
[02:51] And when we then use this in our frontend, we get straight away auto completion of all our API endpoint, and we get the data inferred from your function in the backend to your frontend. And this doesn't rely in code generation. It's just a bit of an abuse on the TypeScript compiler, and it's a thin wrapper around React query. 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.
Example
[03:26] So let's see a bit more complex example. Here we have a backend that is actually talking to a database. 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 frontend. And then at the end, you can see that we are talking to a database through an ORM called Prisma, and that gets on data back that is also then inferred straight away on the frontend.
I started working on this open source project to scratch my own itch around January. And since then, it's got quite a lot of traction and a lot of companies are using it in production already. It's really well tested, and I would really love you to check it out. It's used right now for everything from COVID vaccination bookings to insurance companies, to grocery delivery apps.
[04:28] Obviously this is a lightning talk, so I won't  be able to cover all the features of tRPC's. To mention a few of what you can do, is that they have mutation helpers the similar way that we have the use query stuff that I just showed you. We could do painless SSR, and we can do a lot of other stuff as well.
I'd love to hear from you, if you love or hate tRPC. You can reach me on Twitter @Alex.JS or by email on Alex@trpc.io. It was ... Yeah. Thank you.
by