Sending Data to Serverless Functions

[00:00:00]
>> We wanna get into the actual serverless function that's gonna send these form submissions. So the way that that will happen is we're going to get back into this functions folder over here, and we're gonna create a function called contact. So in our contact form, we can export the handler, and that is going to get the event.

[00:00:30]
And then we also need to get the callback, because we're going to send back something a little bit different than what we did before. And the way that we'll do it is we're gonna skip this context, cuz we don't need it, and the callback is the third argument.

[00:00:46]
So this is a full serverless function setup, is you'll get these three things. And the callback is a way to return that status code that's done wherever you want in your code, as opposed to being returned. And the reason that we're doing that is because the code that we're gonna use is callback-based.

[00:01:09]
And so instead of trying to unravel that, we're just gonna follow their conventions and use the callback. So the first thing that I wanna do is I wanna console.log the event so that we can see what comes back. And then we're going to send the callback, so the first argument to the callback is an error.

[00:01:28]
So if nothing goes wrong, we wanna pass null to signify that nothing is wrong. And the second thing is that object which has the status code, which we'll send as 200, and the body. And because we're gonna want to get JSON back, this is kind of a quirk of the way that these functions work, is they expect and they send and receive JSON, but they don't encode it for you.

[00:01:55]
So you end up having to do a lot of JSON.stringify. So let's just send an object that's boop: true. And this function, we want to be accessible from our Gatsby app, which means that we need to have a Gatsby app usable, ready to be used. But we need to run this in netlify dev.

[00:02:20]
So what's handy about this, whoops, is that Netlify will actually just auto-detect Gatsby if there is a Gatsby config file present. So we can just create an empty file called gatsby.config to tell netlify dev to use it. And now, if we run netlify dev, that localhost:8888 is gonna have our Gatsby site running, and we'll have access to our functions at the same time.

[00:02:47]
And if you remember, we already rewrote our functions to work at /api, which means that we'll be able to call our functions inside of our Gatsby app as fetch /api/thing. So we have this contact function here, and I want to just get this thing started, so let's run netlify dev.

[00:03:11]
And we can see that Netlify auto-detected Gatsby for us. So it also set up our Lambda server, so now everything's running, it's doing what we want. And if I go to 8888, we see our Gatsby app. But then if I go to /api/hello, our functions are still working, so that's what we want.

[00:03:32]
This is exactly what we want, because it means that now we can start interacting with our serverless functions as if it was on the live server. So let's go back into, let's close up some of these files, let's go back into our form. And let's make this form actually do something.

[00:03:48]
So I'm gonna just take all of this out, and what I wanna do instead is I'm gonna use that fetch API. And I'm gonna submit to /api/contact. And I wanna make the method POST, so that it doesn't add a query string or something. And I'm also going to set the body, so what we're gonna send to it is going to be a stringified version of our state.

[00:04:15]
What we get back from that is gonna be whatever we return from the contact function. So in this case, it'll be this stringified JSON. So using the fetch API, what we'll do is, we'll get our response. And then we want to convert that into JSON. And then we'll just get it, and we can do whatever we want with it.

[00:04:38]
So I'm going to console.log, That response, and then I'm also going to set the state to SUCCESS. And we'll catch, in case something goes wrong, an error. And if we get an error, we will console.error with whatever came back, and then we'll set the status to ERROR. Let me make this all much smaller so that we can see.

[00:05:12]
So this is our handler now, it is set up to actually submit an event and then respond and update the UI based on what comes back from that event. Does this make sense to everybody? So if I save this, I typo'd over here, status, not state, okay. So what we have now is the ability to send this form.

[00:05:43]
And it comes back from the function very quickly, because we don't have a lot of issues there. It's running locally, so there's not a lot of time, but we can see that it logged that boop: true. So our form is doing what we expected, it's responding appropriately. But what happens if it's not responding appropriately, what if we have an invalid response?

[00:06:09]
Let's try, so let's just send back a 500. So now, because I've sent back an error, what should happen is we should get a console.error logged, and it will give us the ERROR state. Okay, something went wrong, and this just straight-up exploded, didn't like it all. Maybe I need to make this into JSON, I don't care.

[00:06:43]
The errors themselves from the thing are formatted properly. But, so, yeah, that is a functioning form. We can actually use it. It's gonna do what we want.