Jamstack Explorers

Up and Running with Serverless Functions with Ben Hong

Customizing the Request with Serverless Functions

Repo: https://github.com/netlify/explorers-up-and-running-with-serverless-functions/


Early on in the mission. I said, one of the things we can do with several this function is that we can customize, what's actually being sent back to the application. In this case, we can see here from the Pokedex API, that a lot is being sent back. But what if we only wanted to poke them on entries from this in the current state that the response is in is actually sending a lot of data that the user doesn't need and thus wasting space.

So how do we customize this? Jumping back into our Pokedex API rather than return the entire data object. We can instead create our own custom object in this case, I'll call it Pokemon. And then here I'll just return the data that Pokemon underscore entries, which we've already identified from the API.

I'll go ahead and start up my server again with NTL dev. And you'll see now that when I click fetch Pokedex, everything still works, but more importantly, our custom object that we've defined is showing up as we expect. As you can see here when we open up the network tab and click in, you'll see that all of that extra data is now gone.

And all you have is a list of all the Pokemon. This is nice, but you're probably also wondering what if you wanted to fetch something different. What if you wanted to customize the requests so that you can fetch other Pokemon from other regions? Here inside of our index HTML, let's go ahead and differentiate between our fetch pocket buttons.

We'll turn our original effects, Pokedex button into a fetch Canto Pokedex, and then we'll duplicate it and create a fetch in Pokedex and update the IDs accordingly next inside of our script block, we'll go ahead and clone the element selector and have a fetch cancel button as well as a fetch heroine button.

Finally, we'll go ahead and update our original function so that it points to the cancel button. And then in here we're going to do something a little bit different. Rather than submitting a get request to our API, we're going to change the method. And the way we do this with the native fetch API is to pass an object as a second argument.

As you can see here, we can then define a custom method. In this case, we want to actually post something to the serverless function and what do we want to post? Well, we'll need a body and we'll go ahead and use that. Jason, that string of five, again, to pass an object. And we want our, this API to be able to receive different kinds of regions and then react accordingly.

So in this case, since we're fetching the Canto Pokedex, We want to make sure that it's region Canto, let's jump back into Pokedex dot JS. Now that we're getting into post requests, it's time for you to learn about to default parameters that are passed with serverless functions. And that is event and context.

These are variables that are attached to our serverless functions that we get information on, that we can then use inside of our serverless function to show you what I mean. Let's go ahead and console log the event parameter. Inside of our site, when click on the cancel button, we'll jump over to our terminal to see what the server is logging.

And as you can see here, there's a lot of information being passed. We can see here that the HTTP method is posts just as we wanted. And more importantly, when we scroll down to the bottom, we'll actually see that our body has also been passed as well with the region Canto, equipped with this information.

Let's go ahead and update our serverless function so that it reacts accordingly. I'm going to define a concept called event body, which was signed to the event dot body property. And we'll go in and make sure we run Jason dot parse so we can access it. Since right now it's currently a string and rather than code Canto, we're going to append the string with the event, body dot region.

We go back into the site and refresh. We'll see that when we click on the button, everything still works just as we expect. Now equipped with this information, let's go ahead and update our home button. I'm going to go ahead and copy this entire function for the Fest Kento. And so we'll add a click event to our fetch home button, and then this time we'll want to make sure that we pass the whole and region rather than Kanto.

Once we save and refresh. We'll see, now that we click on the cancel region, we'll see that the Cantor Pokemon are showing up. And when you click on Helen, it actually did switch and it's fetching heroin Pokemon. And with that, you've learned how to customize your serverless functions to customize what's returned to the web app, as well as learning to post custom data to your serverless function so that it can do more dynamic things.


your progress