Full-stack & typesafe React (+Native) apps with tRPC.io

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.

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.