
Lesson Description
The "tRPC Queries" Lesson is part of the full, Fullstack TypeScript, v2 (feat. Zod) course featured in this preview video. Here's what you'd learn in this lesson:
Steve codes the initial tRPC query for retrieving tasks. The procedure initially includes the database queries. Later, the database queries are refactored into a TaskClient module that can be reused more easily.
Transcript from the "tRPC Queries" Lesson
[00:00:00]
>> Steve Kinney: And at this point, we're now talking about the functions that we want to let the client be able to call, right? And this is a very simple crud app. So l they won't be too compelling, but the idea is, like, you're instead of thinking about routes and the requests and the response, you're thinking more in terms of functions, right?
[00:00:17]
You're thinking in terms of parameters and return values instead. So this becomes effectively an object with methods, right? Where we might have get task, which is a public procedure. I don't make the names. I would have called it something cooler. And we'll have, either queries and mutations, but first we talk about what does this function take and it shouldn't be too much of a surprise to us that it's validated with a Zod schema, right?
[00:00:53]
So we could say something
>> Steve Kinney: This case, the test lists Schema, so what the test query schema? Did I make that a type before, when I was live coding, yelling a lot,
>> Steve Kinney: I didn't make one for the query schema, but we can do that right now.
>> Steve Kinney: That was two words put together, nope.
[00:01:34]
Export test, list, query schema.
>> Steve Kinney: Actually, I just want this.
>> Steve Kinney: That's that query list that we had before. And so that's now exported. So we can go back in here
>> Steve Kinney: And pull in that schema. I could have also written one by hand in here. But the idea is, this is being pulled in from that shared repo, right?
[00:02:23]
So this is a known shared thing that can be validated all over the place, but we will get that validation for free in a way that you'll see momentarily. And then what is the process of doing this? Which is going to be very similar to what I actually have in my existing rest endpoint pieces.
[00:02:43]
Let me make sure all my braces are in place.
>> Steve Kinney: Cool. And so in this point, I'm just gonna basically, so we can go ahead and say
>> Steve Kinney: So, this is access to the database you can see that it is correctly typed as the database. We can go and steal some code that we already have here.
[00:03:11]
So for instance,
>> Steve Kinney: We can get all of our tasks, so on and so forth.
>> Steve Kinney: We'll have that completed tasks. And again, you can pull this out into its own file. We're gonna use Prisma in a second to generate even the types for everything in our database.
[00:03:44]
But right now, we'll go ahead and we'll grab all the tasks and return them. So this is, again, going to be very similar to what I have in here as well. This is Rose, we might get rid of that any, so we're gonna say
>> Steve Kinney: Cool. So now we've got a router where we've said, what do you expect it and taken, right?
[00:04:22]
Kind of not just somewhere from our open API schema, right? And some of this boilerplate goes away pretty quickly.
>> Speaker 2: Would it be better to call the server functions from the trpc TypeScript file, just to be sure the same code is executed, instead of keeping two different versions of the functionality.
[00:04:41]
>> Steve Kinney: I think I know what they mean, which is here we're calling SQL statements twice. Yeah. We would probably pull out a get all tasks into a method that called that we'd call them both the rest endpoints and the TRPC. For instance, let's actually, let's take that feedback.
[00:04:56]
Let's take it to heart, right? So, for instance, one thing we probably should have done a little bit earlier is this didn't matter in our server, because it's one set of crud end points, right? And so we have all these database queries. And then we are, once again parsing the responses all the time, some of the time, right where we got to it.
[00:05:25]
But theoretically, in a larger code base, I don't in every route want to write a SQL query and then parse it to make sure it is where I think it should be. And we're seeing that that was the feedback right now, of like you're writing the same thing twice, 100%, right?
[00:05:42]
So what I meant to do or ldecided not to do at the time and thought there would be no consequences for my actions was create some kind of database client. So you could do something like class, task client. And again, if this is a state of your code base where you're doing these SQL queries, it's not dissimilar from an SDK or something along those lines.
[00:06:08]
Where we'll say something like, we'll have a private database which is of the type database. I think that's the one I want. Constructor that takes the database.
>> Steve Kinney: Cool, and then what you should be able to do is do something like, get all tasks.
>> Steve Kinney: This is similar to what I have in that get right now.
[00:06:58]
And so if you find yourself doing zod parse all over the place, what you might consider doing is you can make a method like this. And again, we can make one for create task, update task, all the things that we ought to be able to do and I will probably have to at some point.
[00:07:14]
And then I will undo it later with Prisma. It will be great, but we have this get all tasks, then what we could do theoretically is like,
>> Steve Kinney: In our server, like say, hey, I want to have a
>> Steve Kinney: And now, instead of calling all the SQL queries by hand, I can do something like,
>> Steve Kinney: And so now I can call this and I will get, as you can see, it's correctly typed, so on and so forth as we go through.
[00:08:19]
And I can now use this on both the trpc server and my Rest server. And again, it's the same thing we kinda did with abstracting this stuff away. We could do it by hand and add all the things and then use them. So now, anytime we call client, dot get all tasks.
[00:08:33]
We know they're pars by odd, we know they'll be good, so on and so forth. Could have done it earlier, chose not to regret choices. So now here we can also do in fact, I'm gonna pay down some of my sins from earlier, which is we can also hear it go.
[00:08:55]
Const, client
>> Steve Kinney: Is new TaskClient,
>> Steve Kinney: But anything you pass down in here should work as well.
>> Steve Kinney: I have the wrong type in here. We could fix that real quick, which is, that's probably the one I like. I think the one I like is SQL light, and the one I don't like is SQLite three, which is the inverse of what anyone would think would ever be, cool.
[00:09:41]
So now everything's like direct database access and my cool little Zod abstraction. Should I give them direct database access? No, the chat said no. Person that chat who is right said no, so now we'll grab the,
>> Steve Kinney: And now we can say,
>> Steve Kinney: We are cool actually with these being under find as well.
[00:10:29]
So now with all of that extra hoopla, when we pull in this to the client, they'll get this client that will currently have one method, right? One method will take arguments that are matched by this schema. And effectively call this function server side and then give me back all of the data that almost as if I was calling server code from the client, right?
[00:11:02]
And it will be transmitted. And again, it will kind of take multiple routes of getting there, a little bit you can have changes. You can say, hey, anytime something happens, send a WebSocket request, and you kind of get that like Firebase, auto updating as well. But effectively, what you do with the TRPC router is you start to define these public procedures are basically functions.
[00:11:26]
Now the client will have a get tasks method that you can call. You can also have a create task method, yeah, and we'll add some more in a second. But you'll add more and more of these, right? And then, effectively, calling the server code from the client is like calling it as if you had one app.
[00:11:45]
But you will get all the type safety because again, if we look at this, it knows that it's got access to the test client. It knows what the input ought to be, it knows what the output is going to be, so on and so forth. So, everything is typed and the types themselves are then available in both places.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops