Make HTTP Requests with React

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 2 years ago

Often to get user data you'll make an AJAX request using axios or the fetch API. In this lesson we'll get a GitHub user's company using GitHub's GraphQL API using React's componentDidMount lifecycle method.

Instructor: [00:00] We'll start out with a class called userCompany. That extends a React component. Then that'll have a render method. We're going to say return this.state.company, or unknown. Then we'll go ahead and initialize our state here with company is undefined.

[00:20] Then we'll use that userCompany here with userCompany, and we'll pass the username prop. We'll use that later, and get rid of to. Next, we're going to do a componentDidMount, and we're going to need the Axios library.

[00:36] I'm going to go ahead and paste a script for the Axios library in right here. We're going to make a request here with a couple options. Our URL is going to be https://api.github.com/graphql. Then the method will be post.

[00:54] The data will be query as a string. This is going to look like an object, but it's a GraphQL query. We'll say user login, this.props.username, and we're going to get the company for the user that we pass in here.

[01:16] Then we need to add headers for authentication. We'll say authorization and error token. We need to get that token from somewhere. We'll go to GitHub, and go to settings. We'll go to our developer settings, personal access tokens.

[01:39] We'll generate a new token. We'll call this userCompany, and we only need the user read/write. We'll generate that token and copy that. Then we'll paste that in here. Now, when that request finishes, we'll say then we'll take the response, and we'll say this.setState. Company is the response.data.data.user.company.

[02:08] Make sure we're using the right variable. Cool. Now, we get Kinsey Dodds works at PayPal. Let's go ahead and say that the request takes a little bit of time. We see that blinks unknown really quick there.

[02:20] It's not that it's unknown. It's that we don't know it yet. We haven't completed the request, so we're going to add justLoaded is false to our state here. Then when we set the state, we can say loaded is true. Then we'll say this.state.loaded.

[02:38] If it's loaded, then we'll do this. Otherwise, we'll do dot-dot-dot. Now, we get the dot-dot-dot, and then @PayPal. We can use somebody else here, too, Enza Bariski, and he works at Instructure.

[02:56] In review, to make an asynchronous request, you're going to use componentDidMount. You can use a library like Axios to make a request, and when that request resolves, you setState. Then you render that state in your render method.

[03:10] Now, if there happened to be an error with this request, then we could add an error handler. In here, we could say this.setState with error and loaded is true. Then we could reference this.state.error in here, and do something different in the error case.

Jared Hensley
Jared Hensley
~ 4 years ago

explicitly setting a value to undefined seems like a bad idea, shouldn't we use null there? Enjoying this series, thank you for your work.

Kent C. Dodds
Kent C. Doddsinstructor
~ 4 years ago

Hi Jared, Yes, you could definitely set it to null. It doesn't really make much of a difference here. I'm glad you like the series!

Brahma Reddy
Brahma Reddy
~ 4 years ago

axios is not defined

grepliz
grepliz
~ 3 years ago

Where is the best place to put HTTP requests? I noticed you did in componentDidMount(), would it be wrong to put it in componentDidUpdate()?

Kent C. Dodds
Kent C. Doddsinstructor
~ 3 years ago

It depends on what you want to do. If you want to run the HTTP request only when the component is initially mounted then you can use componentDidMount by itself. If you only want it to run when the component is updated, then you can use componentDidUpdate by itself. If you want it to run both when it's initially mounted and when it's updated (like if the company name can change over time), then use both (this is normally what you want).

grepliz
grepliz
~ 3 years ago

Thanks Kent! This series have really helped me a lot!

Sergey
Sergey
~ 3 years ago

Hi Kent I think this code is wrong <code>return this.state.error ? this.state.loaded ? this.state.company || 'Unknown' : '...' <code> May be you mean this <code>return this.state.error || this.state.loaded ? this.state.company || 'Unknown' : '...' <code>

Sergey
Sergey
~ 3 years ago

Hi Kent I think this code is wrong <code>return this.state.error ? this.state.loaded ? this.state.company || 'Unknown' : '...' </code> May be you mean this <code>return this.state.error || this.state.loaded ? this.state.company || 'Unknown' : '...' </code>

Brahma Reddy
Brahma Reddy
~ 3 years ago

@sergey I think that is not an error. What that means is js if (this.state.loaded) { if (this.state.error) { return "ERROR (You probably need to add your own token)"; } else { return this.state.company || 'Unknown'; } } else { return '...'; }

Sergey
Sergey
~ 3 years ago

@Brahma Reddy see https://codepen.io/anon/pen/LaENMJ

Sergey
Sergey
~ 3 years ago

https://prnt.sc/mqdykc

Erik Brown
Erik Brown
~ 3 years ago

@sergey Kent set the logic up properly, in my view. Basically it's checking what to return by asking "did we load the data?" and if it did then it asks "was there an error?". If there was, then we tell the user "This was your error" or we say no, we got what we wanted, and return this.state.company || 'unknown'.

Then a step back to the first ternary expression to say that you simply return "..." if the data didn't load correctly.

Sergey
Sergey
~ 3 years ago

@Erik final solution is ok. https://codesandbox.io/s/github/eggheadio-projects/the-beginner-s-guide-to-reactjs/tree/codesandbox/17-make-http-requests-with-react

But try run code from video on 3.29 https://prnt.sc/mqdykc

Sergey
Sergey
~ 3 years ago

Or check final version render() method in transcript

Erik Brown
Erik Brown
~ 3 years ago

@Sergey I see what you mean. It's hard to spot those changes between the video and the final code! That was basically trying to check if the data loaded when the error DID occur. Maybe Kent was trying to make the laws of javascript logic bend to his will.

Sergey
Sergey
~ 3 years ago

@Erik No problem ). Main point that solution in codesandbox is good.

Eva Michalcak
Eva Michalcak
~ 2 years ago

Hi there,is it possible that a portion of the video is missing? The code seems to go a step further, adding an update on componentDidUpdate, but the video stops berfore. Is that last portion available somewhere? Thanks!