Generating Zod schemas

[00:00 - 00:12] So it's great that we have types available to us on the back end, but we're also going to want them on the front end. Though we're not using them for anything at the moment, we probably will in a very near future.

[00:13 - 00:31] So let's start by adding the front end to our workspace. I'll go to the root package JSON here where the workspace is defined and I'll add front end here and then we'll also add the schema package as a reference in our front end.

[00:32 - 00:41] We'll do that as a developer dependency here. And notice that I'm adding the file manually because we're not using npm install for workspace packages.

[00:42 - 00:53] We don't want it to look in the official npm registry here. We just want easy booking / schema and we want it to just reference whichever version is the latest.

[00:54 - 01:12] So I can now go into the front end folder and run npm install and there will be a symbolic link to the schema package. Kennel can also help us generate Zod schemas.

[01:13 - 01:21] This is incredibly useful when you have endpoints that are returning something straight from the database like we had just now. Let's install the Kennel Zod plugin to Kennel.

[01:22 - 02:00] So we'll go into the schema package and we'll add Kennel Zod. We'll then go to our Kennel configuration file and we will add this so const generate Zod schemas from Kennel Zod and we will add that as the third pre-render hook that we're using here.

[02:01 - 02:05] Generate Zod schemas. So let's try and run this now.

[02:06 - 02:21] Run generate models. And now let's try and take a look in our models folder here and see what the service type file looks like.

[02:22 - 02:47] So we have the interfaces that we had before but now here at the bottom you can see that it exports Zod types for all of the things as well. A quick note I want to make here is that you can see that everything is being specified as explicitly being a Zod schema of the whichever type it is referring to and then being cast as any here at the end.

[02:48 - 03:11] So this is something that's likely to change in the near future so it might be looking different if you're installing Kennel Zod at the moment. I want to replace this with the satisfy operator but there are some issues if something is unknown so I'm trying to look into how to fix that but probably this will be looking differently in the near future so don't get tripped up if your file looks different from this.

[03:12 - 03:28] So let's try and actually use this service type instead of our homemade service type in the app router. So you might notice that this output here is an array of something that looks remarkably similar to what we had in here and obviously that's no coincidence.

[03:29 - 03:44] So basically what we want to do is change all of this with service type which was what it was called. Now I would love for auto import to just work here but I haven't figured out yet how to do that in a nice way.

[03:45 - 03:59] So you can see what is suggesting here is going through the folder but since this is an actual object and not a type we need to import it in the proper way using the workspace. So what the import looks like is this.

[04:00 - 04:23] We're going through the easy booking slash schema and then because we need to access the service type file itself because the Zod schemas also aren't being included in the index file we need to go through the folders and find the service type file where we can get the service type object from. So we now have an array of this service type and let's try and go to our choose type page and take a look at this.

[04:24 - 04:42] So the data that comes out of this query here now is a service type and you can see that that now has the type service type. So if we hover over this we can actually see that our ID is a service type ID which is what comes out of our service type here.

[04:43 - 04:54] So service type ID is the SOD version of the branded type that we had. So we're now making sure that we can't mismatch IDs all the way in the front end here as well.