How to Fetch Data From a React API

[00:00 - 04:44] For this lesson we'll return to the client code. We're going to add a get data button with an on click handler that calls the API just below the query builder. This could also be a use effect hook that fetches data when the query changes. So just below the query builder, we'll add a button with the label get data and it's going to have an on click handler of get data which we'll define here in a second. The get data function will call the API with the user's query . We also need a state variable to hold the results of the API call. So let's set up our state variable first. Let's just call this raw data and the setter set raw data equals use state. Now we're going to type this as an any array. We could type this better if we wanted to but for now we just need to know that it's an array. So I'm going to leave it as type any. Now let's define our get data function. It's going to be an async function because we have to await the fetch calls. So get data we're going to start out by defining the body and headers of the fetch options. So const body equals JSON dot string of phi the query variable. Headers is going to be a new headers object with content type application slash JSON. And now we need to declare our response variable. We'll just call it res and it's going to be of type objects with a data element which is an any array chart data which is an any array and error which may or may not be there. So a bit of question mark which is a string. And I think they need these to be semicolons. We'll set that equal to data which is an empty array and chart data which is also an empty array. And we'll leave error off for now. Now we need to try catch block for the fetch call. So set res equal to await. Now we need to await the JSON method of the fetch call but we also need to await the fetch call itself. So we have two awaits fetch API sales. And for the options, we need a method of post. And we 've already defined the body and the headers. And then JSON. Okay, we catch an error. We'll just log this to the console for now. If we get an error in the response, so the response is successful from fetch's perspective, but res.error exists. Then we also want to log back to the console. Otherwise, we're going to set raw data equal to res.data. Okay, we'll save that.

[04:45 - 05:50] You can check that everything is working by building the application again with npm run build, viewing it in the browser, clicking the get data button and inspecting the network tab of the browser developer tools. So let's go ahead and do that. We'll go back to our terminal CD into the client folder, run npm run build. And when that's finished running, we'll go back to our browser. I've already opened the developer tools in Chrome , so we can inspect the network tab. There we go, the build was successful. Go back to our application, reload. And before we click this get data button here, let's add a parameter query parameter. So order ID, let's say, is greater than zero. That'll return all our rows.

[05:51 - 06:06] Click get data, and that runs the sales API. And we can see that data is an array with looks like 5000 elements, which is exactly what we expect.