Make HTTP Requests with React

Share this video with your friends

Send Tweet

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.

Jared Hensley
Jared Hensley
~ 7 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. Dodds(instructor)
~ 7 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
~ 6 years ago

axios is not defined

grepliz
grepliz
~ 6 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. Dodds(instructor)
~ 6 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
~ 6 years ago

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

Sergey
Sergey
~ 6 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
~ 6 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
~ 6 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
~ 6 years ago

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

Sergey
Sergey
~ 6 years ago

https://prnt.sc/mqdykc

Erik Brown
Erik Brown
~ 6 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
~ 6 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
~ 6 years ago

Or check final version render() method in transcript

Erik Brown
Erik Brown
~ 6 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
~ 6 years ago

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

Eva Michalcak
Eva Michalcak
~ 5 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!