Name: Render Data from a Workers API Response in a React Application
Uploaded: 2021-03-12T12:50:34-06:00
Description: In this lesson, we'll complete our React interface by taking the data from our Workers API and using it to render a collection of images, based on a search query.

Introduction to Build a Serverless API with Cloudflare Workers

Set up a New Cloudflare Workers Project with wrangler

Process Incoming Request Data Using the Request Class in Workers

Make API Requests in a Workers Function Using the Fetch API

Use Workers Secrets to Securely Store API Credentials

Transform and Return JSON Data From an API in Cloudflare Workers

Add CORS Headers to a Third Party API Response in a Workers API

Render Data from a Workers API Response in a React Application

Deploy a React Application Using Cloudflare Pages

Secure an API with Access-Control-Allow-Headers

Build a Serverless API with Cloudflare Workers

In this lesson, we'll complete our React interface by taking the data from our Workers API and using it to render a collection of images, based on a search query.

https://app.egghead.io/api/v1/lessons/cloudflare-render-data-from-a-workers-api-response-in-a-react-application/subtitles

Kristian Freeman: [0:00] Our Serverless API has been built and deployed. Now, we need to implement the user interface for our application. I showed you a quick preview of what that looked like in a final state, showing you how CORS works and how everything needs to be set up in order to render data back inside of this application.

[0:16] I want to show you how to build that real quick so that you can understand how to work with your Serverless API in practice in something like a React application, which is a common way of building interfaces for your APIs. Right now, my React application is straightforward. It's a single component called App, and it uses useState, which is a hook from React to set up one variable, query.

[0:40] Every time I update this input, which has an id of query, I call this updateQuery() function, which takes the event in, which is that change event, and sets query to the evt.target.value.

[0:53] What that means, basically, is that every time I type something in here, for instance, dog, the query variable is being updated to match the text inside of this input. When I click Search right now, nothing is happening. The reason for that is I haven't given it some sort of function to call when I clicked Search.

[1:11] To set this up, let's start looking at how be with both request that data from our Serverless API and then persist it into an array of images, which will then render inside of our user interface.

[1:22] I'm going to set up another piece of state. I'm going to say const [images, setImages] . I will be getting those both back from useState, which just has an initial value of an array.

[1:35] This isn't a hooks tutorial, but the gist of this is basically our initial piece of state here will be an array, which shall be set to images, which we can then update using this function, setImages().

[1:46] I'm also going to set up a function, which is just called search(). This is an asynchronous function. It's just going to say const results = await getImages(). That's going to be a function that we're going to pass in our query to. That's that value that we've been writing out in our input here.

[2:06] Then with those results coming back, I'm just going to say setImages(results). We're going to say, "Make an HTTP request here to our API giving it that query, and then set the result of that to our images."

[2:09] Let's set up our getImages function. I'm going to say const getImages = async query. It's just an asynchronous function that takes in query as an argument. Now, it needs to make a request to our Serverless API.

[2:36] To do that, first we'll set up a url, which is just serverless-api.signalnerve.workers.dev. When you deployed your own of course this will look slightly different. It will just match whatever your worker subdomain is.

[2:49] Then with that URL, I need to make a fetch request. I'm going to say const resp = await fetch(). Fetch of course, as we talked about earlier, is a function that takes two different arguments, the first of which is my url.

[3:04] I'm going to say go make a request to the serverless-api.signalnerve.workers.dev url. Then I'm going to pass in an options argument here which is going to give additional context as to how this request should look.

[3:18] I'm going to give it a method: "POST" which says, "Make a POST request to this URL," a body which is going to be the content of this request. I'm going to say JSON.stringify() and then just give it an object with query so this is just a short hand that says set the query key to the value query which is coming into this function from this query state value here.

[3:44] Then finally, I'm going to give it some headers. This is just going to be a key value pair of Content-type set to application/json.

[3:54] To summarize, I'm making a request to this URL. I'm saying it is a POST request with a body set to query and a header set to 'Content-type': 'application/json'.

[4:05] This batch request returns a response and now I can say return resp.json(), which will just return the JSON data back from this response. Of course, you might remember that the JSON method returns a promise and so down here in search, I'm just going to say await getImages. This will give me the JSON data back from that API request.

[4:28] The last thing we need to do is we've set up the search function and now we need to call it. Here in our button, I'm just going to say onClick and give it the prop of search. I'm going to say every time that we click this button, call this search function.

[4:43] Back in the frontend of my application I'll just give it something like pizza. I'll click Search. It's made the request to the API. If I open this up here and come down to the bottom, you can see that it has this Request Payload where query is set to pizza and a response that is a ton of data about things like id, image.

[5:04] If I come to the previous section here, you can see it formats it with a little bit better layout. I can open up one of this and I can look at for instance the link, which I'll just copy and put into a new temp. Yeah. It's a picture of pizza.

[5:16] We are getting our data back from our UI and now let's render it in our React application. To do that, I'll just say images.map, give it a function here which just has an image and I'm just going to make a very, very simple layout where I'm going to say this is a link with a key of image.id and the href, which is saying where this link should go to, to image.link, that's that URL back to Unsplash.

[5:45] Finally, I'll give it a target value set to _blank. That's going to make it so that it opens in a new tab when I click on that link, so it doesn't overwrite my UI. It opens whatever link I want to go to into a new tab.

[6:00] Outside of that, we want to show the image. To do that, I'm going to say image with a src that is set to image.image. I'll close that tag.

[6:10] If I refresh here, you can see that it has already rendered this. I get this list of lots of delicious-looking pizza. Here are all the images. Clicking on one of these will open it in a new tab. You can see it goes directly to Unsplash.

[6:25] We've taken the data from our Serverless API. Not only can we look at it in our Network inspector here, we can take that data and begin to use it in our application.

Render Data from a Workers API Response in a React Application

Share this video with your friends

Course

Build a Serverless API with Cloudflare Workers