Why I use Zod with Server Actions

today I want to show you why I always reach for Zod whenever I'm working with react server component server actions and to show you what I mean I've got this edit blog post form right here this is a form that loads a blog post out of the database and lets us edit it and this whole page right here is driven by a react server component and today we're going to wire up this page to use a server action now the way that server actions work is we have one right here server action is just a function that uses this use server directive and the way you use it is you pass it into a form so if we come down here to our edit blog post form we can see that we have this action property and we're passing in this save post function and this means whenever this form is submitted the save post function is going to be called with all the form data so let me show you what that looks like we'll come back up to our server action and we are going to console.log form data and this form data argument holds all the data from the inputs in our form react is going to hand this off to our server actions whenever the form is submitted so if we come over here and we submit this form we can see that our form data gets logged to the console so we can see name equals title value this is a test post we can see uh the text area that holds the content of the post down here and we also have this name ID value one this is the ID of our blog post this comes from a hidden input in our form this is just to let us know which blog post we're editing here now today we want to get these edits from this form back into our database and right now we're working with this form data class so the first thing we want to do is we want to get the data out of form data and into a plain old JavaScript object so we are going to make a new variable we'll call it form and we are going to use this line right here we're going to use object Dot from entries to convert our form into a JavaScript object so if we console.log form and take a look at this when we submit our form we can see that our form is represented as a plain old JavaScript object so we have property ID value one so this type of data structure is going to be a lot easier for us to work with okay now let's get this data back into the database in this application we happen to be using Prisma so we can call await prisma.post dot update and the way that Prisma update post works is it takes two options the first is going to be aware and this tells us which post we want to update well we want to update the post with id1 so we'll use form.id and then the next option to update is going to be the data we want to update and here we are just going to start by updating the title so update Title to be form dot title okay so right away we get some typescript errors and if we Mouse over this ID we got this error that says type string is not assignable to type number and this is because the ID in our form gets represented as a string the ID comes from a hidden input and when we submit this form all those fields are going to get serialized as strings and sent to the server so right now form.id is a string but Prisma expects a number and this is typescript warning us that this is going to cause issues for Prisma in fact if we try to save this page we're going to get this Prisma error that says argument ID got invalid value of string 1 on Prisma update post okay so we can fix this by turning our string into an integer and we will use parsint to do that so now if we save uh we get this new typescript error and this error says argument of type form data entry value is not assignable to parameter of type string type file is not assignable to type string and this is a little strange we're getting an error about a file type but there is a good reason for this and that is that form Fields can be represented as two different types so you have your regular form inputs your hidden inputs your text inputs your text areas those get represented as strings but you also have another type of form input the file input and when that gets submitted as form data that gets represented as a file type and so this is typescript warning us typescript is saying hey you know that uh form.id field well that could be a file input and if it is a file input you're passing it to Parson and that doesn't make any sense okay so we can get around this error by doing a type of check so we can say if type of form Dot ID is equal to a string then we'll parsynt it otherwise we'll just treat it as undefined and now this makes that typescript error go away now we've got one more typescript error and that is on this title property and this is that same type of error typescript is warning us that form.title could be a file input so we will do the same type of fix we will just use a type of check to make sure we're working with a string before we pass this data to Prisma okay this looks good let's see if we can actually use this server action to update a blog post so we'll just come over to the title let's add some twos and then submit it okay that's great it looked like everything worked let's go over to our database and let's just refresh our database with Prisma studio and there we go we see all the twos so it looks like prismo was able to update our database pretty cool now there's only one problem with this code right here and that is this is really difficult to read we have these ternaries we have these type of checks we have these undefined you know right now we're only dealing with two Fields we're only dealing with ID and title we still have to deal with content and this publish checkbox down here and so this code is just going to expand in size expand and boilerplate and again it's really hard to read I don't like opening up files that look like this it takes me a minute to have to grok them there's just way too much going on here so this is where Zod comes in Zod is going to allow us to take our form data and transform it into the exact types that Prisma needs in order to update the database so let me show you how Zod works the first thing we're going to do is we're just going to comment out all our gnarly Prisma code and we are going to create a new variable called edit post schema and this edit post schema is going to represent the values that we want to get out of our form when it's submitted to our server action and so the first thing we want is we want an object that represents our post so we're going to use Zod and the way we do that is we import this Z from Zod and then we're going to say we want an object that represents a post now what should this object have well we know we need an ID and so we're going to say our ID is a string and we're going to use a string because we know that our ID gets sent over as a string from our form and then also we know we need a title so we'll say we have a title and that has a string and for both of these we're going to use Z dot string this is a command from Zod that says these two Fields need to be strings now that we have our post schema we can get the data using the schema so we'll say data is edit post schema dot parse in here we're going to pass in our form and then finally we will console log the data that we get back from Zod okay let's see what this looks like we are going to submit our form again and here you go this is a data that's odd returned and you see that we get an ID that's string one and a title that is a title from our form and the really cool thing about this is if we Mouse over this data property we can see that we have ID as a string and title is a string so we know we have the right types there's no need to do any sort of type of checks which means we can come back to our prismic query and here we can just say ID is equal to percent data dot ID no need for type of check pretty cool and same with title we can say title is equal to data.title so right away we can see how Zod is cleaning up our code let's go ahead let's change the title again okay looks like it worked come back to Christmas studio and there we go look we see the threes and so here we can see that we're able to use this data returned by Zod right inside our prismacol now one thing I'd love to clean up here is this call to Parson when I open this file and I see this Parson it's not really clear to me why this is a Parson I have to think back oh yeah it's because the form input is represented as a string and we have to convert that to an integer but this right now is just noise we know our form has an ID it'd be awesome if Zod could give us back the integer representation of that ID and it turns out we can do that with a command from Zod called cohorse so we can say hi ID is equal to Z DOT cohorse number and this is going to tell Zod that Zod should force the ID from our form to be a number and you can see here we're getting this error from typescript it said argument of type number is not assignable to type string we don't need to parse in a number so we can just get rid of this whole call okay now if we submit our form look at that we can see the ID is represented as a number one so no more need for a Parson very cool okay now let's get the rest of our form wired into our Zod schema so we have this content text area that's going to be a string and then we have this published check box and we want that represented as a Boolean okay let's see what happens when we submit our form we get this error from Zod and it says a path published and expected a Boolean but it received undefined and if we go up to where we log our form data you can see that there is no published property here but we told Zod that our form would have a published property that's a Boolean and this is what happens when there's a mismatch between our schema and the object like our form that we're trying to parse Zod is going to throw an error that we have to deal with now in this case there's there's no published checkbox and this is because this is how check boxes in HTML work if a check box is not checked it doesn't get submitted with the form data it's completely left out in fact it only gets sent to the server when it's checked and so we can tell Zod that the Boolean might be undefined but we always want published represented as a Boolean so we can again use coerce to say it might be undefined if it is undefined treat it is false otherwise treat it as true and now if we uncheck our checkbox and submit our form we can see down here published is not included in our form submission but when Zod parses the data it is going to treat published as false pretty cool and if we happen to check the check box and submit it we can see that published is included in the form data and sod treats it is a true Boolean and so here we can really see how Zod is making it so easy to work with form data okay let's go ahead and use Prisma to update the rest of our Fields so we will say content is data.content and published is data dot published okay let's try to make some edits we'll add some fours change this to be 444 and we will treat the post as published all right and we will check in Prisma studio so we'll reload this and there we go we see our fours and we see the post is published so this is pretty awesome okay before we go let's just clean up this code a little uh the first thing I'm going to do is I'm going to get rid of all these console logs and then next we are going to simplify the data that we get back from our edit post schema so we're going to use object restructuring here and we're going to ask our post schema back for two different things the ID as well as the data that we want to update and then now we can just use the ID field in where and then for data we can get rid of this whole object here and just use the data that's returned from sod and if we Mouse over this we can see that data is just the fields we want to update Title content published and ID is going to be the post ID that we want to update okay one more time let's change this to fives let's unpublish it okay looks good and the real test there we go we see all the data in our database got updated correctly and so this right here is why I love working with Zod so much especially when working with form data and server actions I would say that most of the server actions I write end up taking on this shape I take informed data I write a Zod schema I parse that form data with the Zod schema and then I take that the data that I know is in the shape that I want and hand that right off to Prisma I think this code is just so simple there's no if statements there's no ternaries there's no type of checks and one of the best parts of using Zod is that we know that if our post schema parse ever fails Zod is going to blow up it's going to throw in error and so we're guaranteed to have the type safety of our schema for everything below our parse call which is just awesome because look how simple this Prisma update statement looks so again this is why I always reach for Zod whenever I am writing a server action now if you're new to server components or you've never used them before I have a whole course on build UI it's about data fetching with server components in the course we build out this user table we go over data fetching Prisma pagination client components transitions loading templates it's a great introduction to server components so I strongly recommend you check that out if you want to learn more about these server components I'll have a link to that in the description below but I hope you enjoyed this video on Zod and I'll see you in the next one foreign

Channel: Ryan Toronto

Views: 11,949

Keywords:

Id: h3w9tQoXx5I

Length: 15min 20sec (920 seconds)

Published: Wed Jun 28 2023