Use Fetch to Load External Data in React Native

[00:00] Just a recap of where we're at. We have this handlesubmit function that's going to run whenever someone clicks on this button. What we want this handlesubmit button to do is it's going to show a spinner as the data is getting fetched. It's going to get that data and then pass that data to another component or another route, and that data will get rendered, and we'll see that route. So, the very first thing we're going to do is create this external API file.

[00:28] Let's go to our app folder, create a new folder called utils, and in here, let's create a new file called api.js. All this file is going to be is it's going to be an object which has a few methods on it. Those methods are going to use fetch in order to get some information from GitHub.

[00:48] Let's go ahead and export this. The very first method we're going to make is let's call it getrepos.

[00:57] This method is going to accept the user name and we're going to format this username just a little bit, so let's do tolowercase on it as well as trim. Then, let's set up our URL.

[01:16] Notice here I'm using back ticks, the reason for that is because back ticks allow us to do, or gives us the ability to use this ES6 template thing. I don't know exactly what you call that.

[01:32] What this allows us to do is, if we throw in username here, this, addrepos to the end of it, this is the same thing as doing something like this, where you're concatenating this string. It's just an easier way and it looks a lot cleaner to do that.

[01:51] I'm a huge fan of these back ticks in this templating language, or templating ability in ES6, so we're going to use it all over the place in this app.

[02:02] We have our URL, and then what we'll do as we talked about, we'll use fetch and we're going to return that, so we'll get a promise returned, and then this fetch invocation is going to return us another promise, which will chain, and we'll get a response, and then we're going to return rows.json as we did before.

[02:25] Just one thing that's new here is we're using this ES6 fat arrow, we'll get a few benefits from this. For one, we don't have to write function, it's less typing.

[02:34] Another one, we don't have to worry, it doesn't really help us in this use case, if we were using this keyword inside of this function, what usually happens is every time you create a new function and that function gets invoked, that function has its own context. If you use fat arrow though, it will keep the context of the parent function, so you don't have to do like .bind or any of that crazy stuff.

[02:56] But we don't really see that here, but we probably will in the future and I'll point that out when we get to it.

[03:01] Now that we have this getrepos method, let's add another one called getbio. This is going to do a lot of the same thing, so I'm going to just copy this. We have our user name, we're not going to do slash repos, but we still have our URL, and we're going to return fetch at the URL, which returns us a promise that we can chain, and we'll get a response back, and then we'll return another promise.

[03:31] All right, so there's our API, and it looks pretty good. Now, let's go back to our main.js file. Here's where we're going to want to invoke our getbio function.

[03:47] Let's do, first, we need to require our API, so we're going to say var API = require, we're going to go into utils, and then our API. Now, we're going to do API.getrepos. This is expecting to receive our getbios, excuse me, it should be expecting to receive a user name, which we forgot.

[04:09] Let's do getbio, we're going to pass in this.state.username. Remember we set up earlier this handlechange function that's updating the state whenever someone types into the input field.

[04:24] So, when we invoke getbio that's going to return us a promise with this response, and so this response, ideally it's going to be something that we're getting from GitHub, and it's going to be basically an object with all of this username's property.

[04:42] Then what we're going to do...If we try to look up a username that doesn't exist, then GitHub is going to populate this .message property on our response with "Not found."

[04:55] If we find that, what we'll do is we'll set our state, and have our error be user not found, and then isloading will become false, but if the user was found, and we don't get an error, then what we'll do is we're going to use this.props.navigator.push. We're basically pushing a new route onto the stack.

[05:20] The reason we're able to do this is because if you remember back in index.ios.js, we created this component. What we're going to do is we're going to push this new object, or we're basically just going to change routes.

[05:37] The title of this is going to be the name of the user that we entered in, or if that person doesn't have a name on GitHub, let's just do select an option. The component we're going to use is a dashboard component which we haven't made yet, but we'll make that in a second. Then the properties we're going to pass to it, or the data we're going to pass to it is userinfo, or is the response and it's going to go in as userinfo.

[06:04] After we do that, we're going to set the state. So if we go back, the state will be nice and clear for us, or nice and reset. We're going to have an error is going to be false, and the user name is going to be an empty string.

[06:19] This looks great. We're doing both of these things that we want to do. The only thing we need to do now is make this dashboard component.