Current section: Server Actions 27 exercises
solution

Client Side

Loading solution

Transcript

00:00 Here we are in our UI index file and we want to make it so we can actually submit this so we got to configure our our create from fetch to be able to handle call server properly. So let's make our async function call server this is going to take our id and args and it's going to do a whole lot

00:19 of stuff but not all of it is it that what we want. So we're going to get our fetch promise and that is a call to fetch we're not awaiting that so that's why it's a promise we're calling an action endpoint that doesn't exist yet but it will we're passing the ship id and whatever else

00:36 is in the url we're using method post so that we can pass a post body we want to await this because this is an async async operation to encode the reply for these arguments and then we also need to pass the id of the action to our back end we're going to use headers you

00:55 could that's probably the best way to do this is to use headers to pass the id of the action so the back end can resolve this request to the action that it's calling now that action could return something if we go to our actions we're returning a status of success with a message or an error

01:12 with a message and so we need to not only take what it returns but also this endpoint should return the new rsc payload that we should be displaying for the user so we're going to pass

01:24 this to create from fetch but this is going to get our action response promise and we're going to get our return value from our action response promise so the create from fetch call here which

01:42 incidentally is going to re-register call from server properly that's why we wrote it like this but this is going to take all the rsc payload side of things convert that into react elements but it's also going to take the return value that we're going to return from the server and it will deserialize that into whatever we want to display to the user which is pretty

02:03 sweet so we're going to take that return value and return that and now our call server is fully implemented so if we save this let's refresh the page make sure we've got everything under control here and then we say fast galaxy cruiser hit enter on that we're going to get an error because we

02:20 haven't implemented the server side of this yet but we can take a look at our post right here and look at the payload and boom we got our fast galaxy cruiser so all this is going to be serialized and managed for us it also is including the ship id and things but with that we can then

02:39 on the server side go and access our header right here where is it yeah rsc action right here that is the rsc action id which came originally from the rsc payload and we're passing that back

02:54 to the back end so it can turn that into our or resolve that into the module and the named export then call the function with this payload and then it sends back the ui that we want so there we go we are closer to having this feature implemented