
Lesson Description
The "Generating Zod & tRPC from Prisma" 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 demonstrates how to generate Zod schemas and tRPC methods from Prisma. OpenAPI is also revisited and Swagger is added to the project to provide feature-rich API documentation site for the application.
Transcript from the "Generating Zod & tRPC from Prisma" Lesson
[00:00:00]
>> Steve Kinney: The interesting part, though, is we talked about, the cool thing about TRPC, it's effectively like having functions. And the other cool thing that we saw is that Prisma has a lot of functions, right? So now what I could do is kind of like begin to iterate over those methods, right?
[00:00:20]
And exposes them all to the client, right? Or a subset, or many of them, right? Cuz there was create, many, right? There was a whole bunch of these. And I'm gonna get all of the inner workings with all the type safety for free. Those I might have to figure out an entire, REST full API experience.
[00:00:39]
If I was doing that with a regular REST client, but here I can just expose those methods. They will have the same things that Prisma has on the server. The client can almost act like it's calling things on the server. The type safety is then carried from the database through the web server all the way to the client and back the other way again, right?
[00:00:57]
And so again, great if you can get away with it. If you can't, we have those lower level options, and you can kind of choose your own involvement in Project Mayhem, right? And figure out what area your code base works. So for instance, I can do something like this, where we piss in Zod generator to generate me the Zod types, cuz I'm getting a lot of the type safety from gRPC or TRPC for free, right?
[00:01:28]
But if I wanted the Zod types as well, and with this little plug-in, I was so close. It was like I've never hit that button before, and I was like, here it is. MPX, I think it went to the top of the workspace file.
>> Steve Kinney: Cool, and now if you look in this generated folder, it is a lot, a much more robust set of Zod schemas generated for me directly representing the database itself, right?
[00:02:02]
And so taking from that initial schema, dot Prisma, pretty close, obviously we've stuck to a theme this entire time, generating all the types and all the tests from the database layer forward, right? And then, theoretically, I could import these into that TRPC-like set of methods as the inputs, and now I know that they are legitimately the ones that match the database that the front-end React app is calling, right?
[00:02:29]
Again, I get that all the way from soups to nuts, like finish all the way through some other fun things that we can do, check this one out. We all go in here. There is also a generator for tPRC. Why did I watch him set up a tPRC client if he is just gonna show me this at the end?
[00:02:58]
Cuz I am terrible person. MPX generate, I think it's just tRPC. I gotta put Prisma in that one [LAUGH]. Cool. And that in the generated stuff, we now have routers and. Schemas, and again, this looks very similar to what we just did, but I didn't do it. This is now a task router, as opposed to one I wrote myself with basically all of the different methods, just as we were opining that it would be cool to have before.
[00:03:38]
Now, from the client, if I imported this router, I would be able to kind of do all of these different things, from the browser through the web server to the database and back out again. And you can see with the Zod schemas that it generated in one complete package of type safety across every part of the stack.
[00:04:00]
One last bonus thing, going back to the open API stuff that we saw earlier, which is, you can also, again choose. Somebody asked before, like. Okay, with this JSON schema, would you just expose it, right? And a lot of cases, like for our open-source server, we do. There is an endpoint.
[00:04:28]
I forget what the name of it is, cuz it's in my browser history all the time, where we kind of, well, just either both expose the actual schema so you can just get it, right? But there's also this project called, I forget the name of Swagger UI, where you have seen this before, right?
[00:05:06]
>> Steve Kinney: So what we can do is we can take our open API schema that we have before going back to the rest stuff if we wanna do for a second. And grab this Swagger UI and this part, we're also gonna pull in that.
>> Steve Kinney: So this is pulling in that JSON file that is my OpenAPI schema, and this is another piece of middleware that exists for Express.
[00:05:52]
And then what you can do is to
>> Steve Kinney: Cool, and then what I should be able to do
>> Steve Kinney: Is it takes your open API schema and gives you a whole postman interface. You've probably seen this before from other ways, but if you're wondering how to generate one yourself, as long as you have the schema, you can expose it.
[00:06:24]
You can do stuff like see what a post request looks like and execute it and see what the curl command would be and what the response is based on the sample data, right? So sometimes using some of this tooling, if you can, obviously, and if, again, like we saw that perhaps getting instrumenting everything to the point where you can get to an open API scheme.
[00:06:46]
If you don't have one, you're starting from scratch, very easy to do. You can use that schema, so on and so forth. But if you are trying to get one, it's been a wild west of like rando express routes. It's gonna take a little bit of time, but we can argue that it will take a week, two weeks.
[00:07:02]
Maybe, is it worth it? Maybe.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops