Handling Form POST in a Serverless Function

[00:00:00]
>> Now we can take this over, and we can just start doing what we expected, right? We wanna create a serverless function that calls this mutation. So, let's head over to our code again and we're gonna create a new function. This function is gonna be called add-movie.js. Before I start writing this code, does anybody have questions about the GraphQL mutations?

[00:00:34]
Everybody's good, okay? So, in here, we are again going to pull in query. And that's gonna come from util hasura. Then we're gonna export our handler, and that's gonna be an async function that's gonna get an event. And then I wanna pull out from our event, the ID, title, tagline and poster.

[00:01:12]
And these are gonna come out of event.body, right? And event.body, we haven't talked about this yet, because what we're about to do is we're about to post values to this function. So let me let me actually save this. Before we get into the history stuff, let's start sending some data in so that we can see what's coming out, right?

[00:01:36]
So let's start by just having this ready, and then let's head over to our function and send some data in. So, let's open up in the source folder. There's admin.html, and this is where our form lives, okay? And so underneath the form, let's, oops, let's add a script tag.

[00:01:59]
And inside of this, we are going to add a function, that's gonna be async, and we'll call it handleSubmit. And it's gonna get the form submission event. And what I wanna do, we're gonna custom submit this. So we're gonna prevent the default form submission using event.preventdefault. And I wanna get the data out of it.

[00:02:22]
And we're gonna use one of my favorite web API's, the FormData API. So I'm gonna use new form data. And we're gonna get the event.target which is the form, the target of the form submission is the form element. And so what form data does is it gives us access to the actual information in the form.

[00:02:47]
Whatever is in the inputs, we can get that data now. So in here, I'm going to, let's submit our data. So the result is going to be, we're gonna await a fetch call to netlify functions, add-movie. And in this one, we wanna send it as POST data. And I wanna send the body as JSON.stringify.

[00:03:19]
And we're gonna send in the ID, as data get id. And where I get this from is from the inputs themselves. So up here we can see that we've got an input with a name of ID, name of title, tag line and poster. So we can just get whatever the name of the form input is and use that data.

[00:03:42]
So I'm gonna get the id. I'm gonna get the title. I'm gonna get the tagline and I'm gonna get the poster. So now, I have created a submission to our serverless function and we're gonna call it with POST instead of get. And when we call it with POST, that means that it's not going in as query string parameters.

[00:04:10]
And there's a reason for that. I don't want the data in the body to show up in a server log somewhere, right? We don't want the URL to be called this like, add-movie query string, title, tagline, etc. We want it to be just a call to add-movie and then the body gets sent as a POST body object, which then we'll grab out once we're done.

[00:04:36]
So what we're gonna get back from that is we're gonna get a response again. And that response is, we don't actually need to parse it as a JSON or anything, because all we really care about is the status code. So up here at the very top, I have this message field.

[00:04:57]
And what I wanna do with the message is just let us know what the response from our serverless function is, because we're gonna add a few things. We wanna make sure like if something goes wrong, we're gonna print that status code. But later we're gonna require someone to be logged in.

[00:05:10]
And we wanna show a 401 for unauthorized if you are not logged in when you try to submit this form. You'd probably end up having more robust messaging that would say like you're not logged in or something like that. But we're not too concerned about building the UI here.

[00:05:26]
We're more concerned with getting the serverless functions to do what we want. So we're gonna stick with just status codes today. So once we're done, we're going to grab the document.query selector, and we're getting message, right, that div that is up there. And we want to set the inner text to be a response of response.status.

[00:05:55]
Okay, so that is our serverless function. So, now what we'll get is we're gonna end up whatever goes into this form is gonna get submitted to our add-movie serverless function, and it's going to submit along with the id, title, tagline and poster. So once we do this, what I wanna do is just let's just take a look at what comes back in this event object.

[00:06:22]
So let's console log event? Then I'm gonna start the server And just to prevent it from timing out honest, I'm gonna return a status code of 200. And let's send back a body of like, Work in Progress, WIP, so that it doesn't timeout when we try to make this call.

[00:06:45]
And then I'm going to go over to my admin. And let's just send in some data. All right, so I'm gonna add that I not saved my admin page? Okay, [LAUGH] I missed one quick step. So we wrote this function to handle the submission. We never actually hooked it up though, we have to tell the form to use it.

[00:07:18]
So down below here, under this function, let's also run a document.querySelector. And we're going to find the form which is called add-movie. And we're gonna add an event listener of submit, and we'll run handleSubmit, okay? So, now when we come over here, and I write, Id, title, tagline, poster.

[00:07:53]
It actually does something. And we should see is it submitting or did it give me an error? JSON.stringify.then I type out something, okay? So I hook that to the wrong thing. This is my JSON.stringify. This is my fetch call, so I needed to hook the .then out here instead.

[00:08:26]
So let's try that again. Okay, so we get a 200 response. And that's what we expected because we had it return a 200 no matter what. And so let's look in here and see what we got back. So here's our event. Let's make this a little bit bigger.

[00:08:47]
And we can see that we get a bunch of information back, right? We get all this stuff. So we get the path. This is the function that was called, we get which method, our queryStringParameters are empty because we use the POST. We can see that we've got headers.

[00:09:02]
And the headers that we're getting are all sorts of things. You've got like the languages, and these are all kind of set by the browser. So we've got content types and origins and all those things. And then we start looking in here, let's find our body. Our body is here, and our body comes back as a string.

[00:09:24]
And we can see that it's an id and we put in the value of id. And so I just use the the name of the field for each one. And we can see that those came through. But you notice how they're a string. So this is it looks like a JSON object, but it's currently a string which means that we need to parse it.

[00:09:41]
So I am going to in our add-movie function, instead of using just the event body like I have here, We need to JSON.parse and that will give us, Our id, title, tagline, and poster, okay? So those are ready to roll.