Jamstack Explorers

Up and Running with Serverless Functions with Ben Hong

Integrate with a Third Party API with Serverless Functions

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

📝 Transcript

Now that we know how to write a serverless function. Let's integrate it with a third party API. We'll be using the Poke API, which will allow you to get all kinds of information about the Pokemon world. Jumping into our code editor. Let's create a new end point for our application called Pokedex. So we'll need to name the file.

Pokedex dot JS. Then let's go ahead and fill out the serverless function with the three basic parts. We have our exports dot handler, which we assigned to an async function. We'll go ahead and define the API URL under the constant Pokay underscore API. Now that we have the URL, we can go ahead and await what we fetched from that API and assign that to a constant of response.

Then I'll use a new syntax here where rather than using the dot, then we'll go ahead and create a concept called data, which will await the response that will J Sonify using the dot Jaison method. Finally, we'll make sure to return an object just as we expect from every serverless function where in this case we'll have a status code of 200 and the body, which will contain our data, which we need to convert to a string by using Jason inside of our index.

That HTML file we'll need to go ahead and create a new button. And this time we'll give it an ID of fetch polka ducks button, and we'll give it a label of fetch polka ducks. And we'll go ahead and add the element selector inside of our JavaScript by signing into a content of fetch Pokemon button. And then we'll add a click event to our fetch pocket X button inside of our click event.

We'll go ahead and create a constant, a response where we will await a such from our serverless function call, which we'll call at slash dot Netlify slash functions slash Pokedex. Then we'll make sure to go ahead and turn that into a Jason object by using dot Jason. And then we'll make sure to update our P tags inner texts so that it will actually show the response by using Jason on the response.

Now, when we run NTL dev, you'll see that it spins up our server and we see both of our buttons. We'll go ahead and open the network tab. But when we click this time, you'll notice that we're getting an error. What's going on when we click inside here, we'll see that there's a reference error to get a detailed look at the error though.

Let's switch over to our terminal. Instead of a terminal, we can see the full details of our error. Looking at this message. We'll see that the error is that fetch is not defined. You might be wondering why is this the case? And the reason is because the serverless function is running on a node JS server.

In other words, it doesn't have access to the native fetch API that's provided inside of the browser. As a result, when these install our own dependency, the way we do this is by creating an NPM project inside of our site. We do this by running the command NPM in it. For the configuration part, I'll basically leave everything as default by just hitting, enter on everything.

I'll go and add my author name here though, and just say Ben Hong and switch out the license to MIT, but otherwise just falling the default. And you'll see, now that a couple of things have been created as a result. The main difference we see here is that we not have this package dot JSON file, which is a file that's responsible for keeping track of our dependencies and some basic details about our project.

Now that we have this, let's go ahead and install a fetch library for our node server to use. We'll do this by running NPM install dash does save dash dev no dash fetch. And you'll see, once I run this command inside of our package, Jason, we now have the note fetch library added as a dev dependency. Now that that's installed.

Let's go ahead and tell Pokedex that JS that it's time to use dispatch library. And we do that by creating a constant effect and use the required syntax in order to include our node fetch library. Once we do that, we can go ahead and start up our server again by running NTL dev. And once we click on fetch Pokedex, everything works exactly as we expect.


your progress