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.
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.