Make HTTP Requests with React
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.
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.
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!
axios is not defined
Where is the best place to put HTTP requests? I noticed you did in componentDidMount(), would it be wrong to put it in componentDidUpdate()?
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).
Thanks Kent! This series have really helped me a lot!
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>
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 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 '...';
}
@Brahma Reddy see https://codepen.io/anon/pen/LaENMJ
https://prnt.sc/mqdykc
@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.
@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
Or check final version render() method in transcript
@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.
@Erik No problem ). Main point that solution in codesandbox is good.
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!