Current section: Server Actions 27 exercises
Problem

Client Side

Loading exercise

Transcript

00:00 If we try to submit this now, then we're going to get an error, and the error is saying that we're trying to call a function from useServer. So that's exactly what we're doing. We had an action that came from useServer. We're trying to call it, but the callServer option was not implemented in your router runtime. And that's what this is. So when we call createFromFetch from react-server-dom-esm,

00:20 we already are providing the module base URL so that we can resolve client components properly, but we also need to be able to resolve or actually call the server. And so you implement a callServer function, which accepts the ID of the action and the arguments. You use encodeReply

00:37 to encode the body of the arguments so that we can send that request body to the server. We are going to implement this using headers with rseAction so we can pass the ID of the action in that header. And then we make a fetch request to an action endpoint, and we're going to implement

00:57 that in a future step. What's interesting about this is that action can send back our updated React server component payload. And so that way, when you're changing the name of one of these things, we get the updated UI based on that mutation, which will be pretty cool. And so we're

01:16 going to pass the promise here to createFromFetch again, which will pass it through here, which will register our call server again. That's why it's kind of written this way. So we createFromFetch with that fetch promise, and now we've got our action response promise. But the problem is we

01:32 need to be able to tell React, hey, here's the response of this action call. And so we're going to in a future step, we're going to update our backend code so that it actually sends a return value property as part of what we're getting back from our action response.

01:50 And then we can return that return value so that we can display an error message or whatever else we need to for that. So that is what you're going to be implementing in this exercise. Should be fun and interesting. We'll see you when you're done.