Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Fetching Data with the Fetch API

8:15 with Guil Hernandez

Learn to use the Fetch API, a data-fetching interface native to the browser, to load external data and update state in React.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

http://api.giphy.com/v1/gifs/trending?api_key=dc6zaTOxFJmzC

Resources

Giphy API documentation
- Note: The Giphy docs have been updated and relocated to a new website since this video was recorded. The new documentation will look slightly different than what's shown in the videos but the information is essentially the same.
Fetch API – MDN
Introduction to fetch()
Browser support for fetch()
fetch() polyfill
Browser support for JavaScript promises

Treehouse Courses and Workshops

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

[MUSIC] 0:00

Hey everyone, Guil here, a front-end web development teacher here at Treehouse. 0:04

In this workshop, I'll teach you a couple of different ways to fetch external 0:08

data with React and how to display the data in your app. 0:12

We're going to create this fun GIF searching app 0:15

using the Giphy API from giphy.com. 0:18

A GIF search engine where users can search for reaction GIFs. 0:21

So I'm gonna assume that you know the basics of React like creating and 0:25

rendering components, passing props to components and managing state. 0:29

If you're not sure what this means, be sure to check the teacher's notes for 0:33

links to Treehouse courses and workshops that will get you up to speed with React. 0:36

To code along with me, download the project files for this workshop and 0:40

open them in your favorite text editor. 0:43

I'm using Atom. 0:45

In your terminal or console, navigate to the gif-search project folder and 0:47

run npm install to install the project dependencies. 0:53

Then npm start to run the app in the browser. 0:58

So by now you know that React is just a view library 1:02

that simply renders components using the state and properties passed to them. 1:05

React itself doesn't have a built in way to fetch data from a server. 1:08

In fact, since React's only concern is rendering views, 1:12

it doesn't even know that there is a server. 1:15

So there are several JavaScript methods and 1:17

tools you can use to fetch data in a React app. 1:19

The two methods I'll cover in this workshop are the Fetch API, 1:21

a data fetching interface that's native to the browser. 1:24

And axios, a popular tool that's similar to Fetch with a few key differences and 1:28

advantages. 1:32

Both of these are Promised-based approaches meaning 1:33

they use JavaScript Promises to handle the results we get back from the server. 1:36

And you can learn a whole lot more about JavaScript Promises by watching 1:41

the treehouse workshop I posted in the teacher's notes. 1:44

In the app, we'll write all of our data fetching code here in app.js. 1:47

This app component is the main container of the app, 1:51

it's responsible for rendering the child components of the app like a list of GIFs. 1:55

And it's going to pass them the external data state via props. 2:00

So the first thing we'll do is define an initial state inside a class. 2:05

I already have a constructor set up to initialize state and calling super here. 2:10

Lets us use the keyword this inside the constructor within the context of the App 2:14

class rather than the parent component class we're extending from React. 2:19

So now in the constructor, we can write this.state and set it equal to an object. 2:24

Now the state in our app is going to be the GIF data we want to display. 2:30

So let's call the state gifs and set it to an empty array by default. 2:34

So the gif state now represents a collection of objects that will change and 2:38

be updated by components. 2:43

Next, right below the constructor, we're going to set up 2:45

all of our data fetching inside React's componentDidMount lifecycle method. 2:49

ComponentDidMount is called immediately after a component is added to the d DOM. 2:59

So if you need to load external data right when a component gets mounted to the DOM. 3:03

This is a good place to create the request because at this point in the lifecycle, 3:07

the component has a DOM representation. 3:11

So inside componentDidMount, 3:14

we'll add the fetch method to start the process of fetching our data. 3:16

Now fetch provides a simple way to make web requests in the browser and 3:20

handle responses. 3:24

And in the fetch method, we define the path or 3:25

URL to the resource we wanna fetch in our case, the Giphy API. 3:28

And the Giphy API is open to the public and they provide a public beta key 3:31

to let you try it out and the key is required for all the API endpoints. 3:36

You can check out all the different endpoints here in the Giphy API docs. 3:40

For this example, I'm going to return data from the trending GIFs endpoint. 3:43

So I'll simply copy this URL from the docs which also contains the public 3:48

key and pass it to the fetch method as a string. 3:54

The fetch API uses JavaScript promises to handle results, 3:58

the promises let you chain methods in a sequential order. 4:02

In other words, something happens after something else is done. 4:06

For example, after the data is returned then convert that data to JSON. 4:09

So the fetch method itself returns a promise and you can chain then methods as 4:14

call backs that get executed sequentially once the fetch promise is fulfilled. 4:19

In this case, the promise is fulfilled when the browser receives the data 4:23

from the server. 4:27

So I'll go ahead and chain two then methods to fetch. 4:28

And you could also place them on separate lines just to make your code 4:33

easier to read. 4:36

So each of these call backs use the promise created by fetch to return 4:41

a promise of their own. 4:46

So next we'll make the first callback, return the result in JSON format and 4:48

the second we'll update the gif state. 4:53

So once the data finishes loading, fetch returns a response object 4:55

containing the response and we can access it in the callbacks. 5:00

So in the first then method, I'll write a function that takes the response object 5:04

and returns an object containing the data in JSON format. 5:09

Once this promise is fulfilled, 5:13

we'll need to make the JSON data available to the app by setting the state in React. 5:14

So in the second then method, I'll update the gif state by passing in a function 5:19

that takes the JSON data via the parameter responseData and 5:24

returns a new state with this.setState. 5:29

Then inside the parentheses, we'll set gifs to responseData. 5:33

Now looking at the Giphy API docs, we see a sample response for 5:41

the trending GIFS endpoint. 5:46

And in the response, 5:47

notice this array of data containing an object with all the properties of a GIF. 5:49

So we're going to update the state with the objects return in the data array. 5:54

To access the data in the array, we'll set the gif state to responseData.data. 5:58

Now not all promises are fulfilled, so the fetch gets rejected or 6:05

returns in a failed state. 6:09

For example, if you're offline or the API server is down, 6:11

you can use the catch method to catch and handle any errors. 6:14

So let's change the catch method to the sequence and 6:18

now catch will be used when we get an error fetching the data. 6:22

We'll return an error message along with the rejection reason as a console log. 6:27

So let's write an error function that takes the parameter error. 6:32

We'll return a consul log with the message Error fetching and 6:41

parsing data, then pass in the error. 6:47

All right, now let's test our app in the console to make sure we're bringing in 6:55

the data correctly. 6:59

So in the render method, lets log the gif state, 7:00

console.log(this.state.gifs), 7:03

I'll give this a save. 7:13

And over in the browser, you won't see any gifs yet. 7:15

We'll add a code to display them in a later video. 7:18

But if you open up the console, you'll see the array of objects fetched from the API. 7:20

Each object contains data about a gif like its URL, ID, size and more. 7:25

And if you inspect the app component in React dev tools, 7:31

you'll see that the gif state now consists of the array of 25 objects. 7:34

So great, now we know that the fetch method is fetching the data and 7:38

updating state as expected. 7:42

The fetch method and 7:44

JavaScript Promises are available in the latest generation of most browsers. 7:45

So to make sure that your data fetching also works in older browsers, as well as 7:50

all modern browsers, you can install the fetch polyfill developed by GitHub. 7:54

I've posted the link in the teacher's notes along with up to date 7:59

information on browser support for fetch and promises. 8:02

So coming up in the next video, you'll learn about axios. 8:05

A tool that similar to the fetch API with better browser support and 8:09

useful built in features. 8:13

You need to sign up for Treehouse in order to download course files.

Sign up

You need to sign up for Treehouse in order to set up Workspace

Sign up