Loading
Current section: Schema Validation 5 exercises
solution

Schema Validation with Zod

Transcript

00:00 So, let's go to the edit route and we'll come to the server side. That's where most of our stuff is going to happen. And we're going to create a new note editor schema. So, this is going to come from Zod. And so, let's import that from Zod. And then, it's going to be an object. So, this will have a title.

00:18 This will be a string. And for this to be required, an empty string, as far as string is concerned, is considered valid. So, we need it to be at least one character long to assume it's valid. So, a minimum of one character and a maximum of our title max length.

00:36 And then, our content will be exactly what Copilot said. Awesome. So then, we can remove everything that we had for custom validation, including the typeof check that we added long before.

00:51 Because we can just pass the title and description, or the content, all that. So, all this stuff goes away. That's nice. Alright, so then we have our results. This is going to come from note-editor-schema.safe-parse. We're going to get the title from the form data and the content from the form data.

01:10 And then, by the end of all of that, we will have our safe version of this data. So, here we've got, right here, we can get our title and content from the result data.

01:28 TypeScript's not liking that, though, because we haven't checked, first, whether the result is successful. So, let's move that down here, and we'll say result.success. If it's not successful, then we can return the errors. So, coming back down here, we're going to have our errors be the result of

01:46 result.error.flatten, right here. So, when the result.success is false, then you get result.error. And then, that's a Zod error that you can flatten. And the flat result of that is actually pretty similar to what we had ourselves.

02:03 It's almost like somebody planned this, this way. And then, in the case that it is successful, that it's true, then result will have a data property, which will have type-safe versions of all of the things in our schema, which is pretty stellar, I must say.

02:21 So, the last thing we need to do is, as I said, the result that we get from our errors, this action data, it's going to have errors. That's going to be a flattened error object from Zod. That's going to have form errors, and it's going to have field errors, but it's going to have optional errors for the title and the content.

02:39 So, we're going to add the Elvis operator, right there. And that is all that we need to do on the UI side. Then, we no longer need to have this action errors type or anything like that. We don't need to worry about it because it's all handled by Zod.

02:55 Everything that we just deleted, pretty much, is just replaced by this schema, and then using that schema right here. It's pretty awesome. And then, we get the same behavior we were looking for before. Now, it's saying string must contain at least one characters. And, of course, we can customize this.

03:13 So, there are various utilities that you can use for this. Here, we could say, whoops, our message is title is required, if we wanted to keep the same message we had before. And that works just fine. And with all of these validation utilities that you can use from Zod,

03:32 each one of them, you have the opportunity to customize the message. But we're not going to bother with that in the workshop. Feel free to customize it in your own stuff. There are a bunch of different options that you have at your disposal there. And that is using schema validation with Zod.