tRPC on the Server

[00:00:00]
>> Steve Kinney: So let's set it up on the server first. And the best part about this, you're like, well, I already have a REST API. So do I. I have it right here. We've been working on it all day. Guess what I'm gonna do? I'm gonna keep it. I'm just going to add to it with a different kinda service as well.

[00:00:20]
So you can. Again, anything where it's well, I took this workshop, we gotta rewrite everything. No one's gonna be your friend then. The nice part is for some of these things, you can opt in where you need it. You don't have to use it for everything. You can start small.

[00:00:36]
You should start small. Let's look at a very kind of a simple example. So I am going to go into my server again. What am I getting yelled at for? That thing I'm not using anymore, great. What am I getting yelled at for now? One thing I was using.

[00:00:56]
I don't want this anymore. All right, great. Let's hide some of the terminal action. Let's even hide the sidebar. Okay, so, we can actually keep all of our existing REST endpoints and just add to them, and kinda see some of this in practice. So we'll pull in cuz what it will do, and obviously we're doing the parts of Hokan to EXPRESS, this is not EXPRESS-specific.

[00:01:27]
There are many, many different, you can use it with most web servers. Obviously, you can use it with what's built into Next, I don't know if it has a name, but you can use it in all sorts of different places. But we are going to pull in this initTRPC from TRPC server.

[00:01:45]
We've got all our various schemas from before, and we need to go create a few more things here. Leave that for a second. I could do this in the same file, but this file is getting big, so I'm not going to. Let's make a new file. I'll make a folder this time.

[00:02:06]
Well, I'll do it a little different than I did last time, assuming we're good. I will call it trpc-context.ts. And there's a little bit of boilerplate that we will set up here, but let's do it together. So we will import.
>> Steve Kinney: Little helper here, you can kinda guess what it does.

[00:02:37]
If you look, I have this got this little database thing. I might make myself a little bit of an abstraction in a second. So let's also import this getDatabase that we have over in here, and that, basically, it's getting the instance of the SQLite database and setting up the table, and a bunch of stuff like that.

[00:02:59]
Cool, and then we gotta figure out some types, if you're on databases, a little bit. Luckily, that's what the next section is. So we will handle that then. But let's make our point for now. So here we can export basically a context. Now, you ever use React or Svelte, or View, or any of them?

[00:03:24]
You know what the context API is? Great, you're good. It's basically the same basic idea which is some amount of stuff passed into everything, right? So if those words look familiar to you, great. And so all we're doing here is we're saying one of the things that is going to be passed in to all of my TRPC procedures is access to the database, right?

[00:03:54]
It could also be like an OpenAI client, or Anthropic, or whatever, or the Twilio API. Whatever you want to have available, right, to all of your different procedures, you pass in to the context. And then we've got this fun little thing up here, which we are going to, this is I think just a type, actually.

[00:04:21]
>> Steve Kinney: So it doesn't really matter, but I would hassle people in a code review if they didn't do it, right? And all this does is take the createContext and figure out what the type ought to be, right? And so you can see, hey, the Context is they have access to a database, right?

[00:04:37]
So now you get that strong type. This could be third-party API clients, SDKs, so on and so forth. You can do it all. This case we're just gonna have access to the database. In that chart we showed earlier, it's gonna be good. Let's also give it this trpc-adapter, right?

[00:05:02]
There is, like I said, just a little bit of boilerplate. All we're trying to do here is create some middleware for Express, that's it, right? This, we've got the context. We're gonna have the client, but we need Express to know that this is a route that it should be able to handle.

[00:05:18]
And again, we're not gonna lose any of our previous REST endpoints. We're just adding to it with some additional functionality. So it's great because again, you can either paper over an existing API, or you can choose to just do a various piecemeal in small places where you need it.

[00:05:37]
You don't have to buy in completely. So again, the only part that is kind of somewhat unique to Express here, which is createExpressMiddleware, and we will.
>> Steve Kinney: I import the router type from Express. That is the thing that does the get post whatever for figuring out the routes.

[00:06:11]
Pull in that createContext.
>> Steve Kinney: Did I not export it in there? I did, yeah. It's just that createContext is so used all over the place. There are lots of different options, cool. And we have not done the router yet. We'll do that in a second, cool. So again, some of this is boilerplate that you should probably copy and paste off the internet when you're first getting started.

[00:06:45]
But that felt like something I shouldn't do, even though I'm staring at notes where I've clearly written down what I'm doing.
>> Steve Kinney: Cool, we'll take the router. Actually, we needed this to be a real thing.
>> Steve Kinney: And we'll create a new router in this case.
>> Steve Kinney: Not a duplicate one.

[00:07:21]
So we'll say router.use, and this is again, we saw app.use before, an app is effectively an abstraction over router. We're just creating a piece of middleware. We'll say, /trpc. You could do API/trpc. Whatever you want it to be, this is up to you as we go through. We're gonna do the other part in a second.

[00:07:43]
I'm gonna yell that for a moment, but we'll leave that there. CreateContext, cool, cool, cool. Do I have enough closing braces?
>> Steve Kinney: That's just probably not long enough. All right, I do need the app router, which we'll set up momentarily as well.
>> Speaker 2: You wanna rename the other file to be-

[00:08:14]
>> Steve Kinney: Context instead a content, probably.
>> Steve Kinney: All right, so we'll call that context and we've got the adapter in a second. The other thing we need is to actually define the actual API contract, right? And then we'll wire it all together. But like other than annoying boilerplate, we will see some of the cool parts momentarily.

[00:08:45]
Cool and so.
>> Steve Kinney: We'll take that initTRPC, which is where I meant to write it. TRPC uses a fun library called zod to do our schema validations to make sure everything is the way we think it is, right? Cool, and we'll probably end up pulling in some of the schemas in a second.

[00:09:14]
>> Steve Kinney: Context, instead of being called content. And now we get to the point we initiate the actual TRPC service itself, it will then again have access to the database and we will be able to use it.
>> Steve Kinney: I'll export this. We have our app router, and this idea of a publicly exposed procedure as well.

[00:09:49]
You can also have private ones. And then you would have a different router for the various different nouns in your application or the models. But what you can do is we'll call this one just task router, since that seems to be the thing that we were mostly doing at this point.

[00:10:05]
Again, you could also, I won't make you do it, because also tightness boilerplate, but exercise for the reader in your copy as free time later, is try it on the tiny little user service that we made earlier. Cuz, yes we've got a full database and all that kinda stuff, but you can do it absolutely anywhere with the smallest things.