How to Fetch Spotify API Data with Credentials with Axios

[00:00 - 00:21] Okay, so now that we've set up local storage to keep our users logged in to Spotify in our app, let's try using the access token we have in local storage to fetch data from the Spotify API and display it on the front end. In this lesson, we're going to update our React app to asynchronously fetch Spotify data and a use effect hook and display that data in our template.

[00:22 - 00:36] First, let's add some global Axios defaults to our Spotify.js file. We'll scroll down below our get access token function and add the following.

[00:37 - 00:51] Here, we set the base URL and HTTP request headers for every HTTP request we make with Axios. These configs are super convenient for keeping our code clean. We won't have to worry about including them each time we make a request with Axios.

[00:52 - 01:08] Note that the access token in the authorization header is the OAuth access token we retrieved from local storage. Next, we'll add a function that makes a get request to Spotify's /me endpoint which gets a current user's profile.

[01:09 - 01:21] Let's add that below. So, note that since we set the base URL globally, we don't need to spell out the entire HTTPS API.Spotify.com URL.

[01:22 - 01:36] All we need to include is /me. Next, we can head back on over to our app.js file and import this getCurrent UserProfile function.

[01:37 - 01:54] Then, we can add another useState hook to keep track of the data it returns. We'll call this state variable profile and set it to null initially.

[01:55 - 02:12] Next, in the use effect hook, I want to call the getCurrentUserProfile function and set that to our profile state variable. So here, I will create an asynchronous function called fetchData.

[02:13 - 02:28] And I'll just call it below. And in here, since getCurrentUserProfile returns a promise, I want to use a try catch block.

[02:29 - 02:50] And in the try block here, I want to await the getCurrentUserProfile function. And since we're using Axios, remember that the JSON data that is returned from the Spotify API endpoint is a property called data on the response object.

[02:51 - 03:13] So I can just destructure that here. And then I will set the data to our profile state variable. Alright, so if we hit log into Spotify, and we can see we're logged in now, and then the data we get back is the JSON data that we want.

[03:14 - 03:35] Let's go ahead and use this data to display some information in our template. So if we take a look at our JSON data here, we have things called display name, we have an email, we have images, which is the profile image of my Spotify profile.

[03:36 - 03:53] And we have a bunch of other things. So let's head down to our logged in state, and under our button, we can do a ternary and say profile and an. So once the profile state variable is not null, we will render the following.

[03:54 - 04:01] Maybe we'll have an H1, say profile.displayName. Give that a save.

[04:02 - 04:07] Awesome. After that, maybe we'll have the number of followers we have.

[04:08 - 04:22] So here you can see I have a total of 25 followers. And we'll say profile.followers.total.

[04:23 - 04:38] And if we take a look at the error here, it says we have to make sure there's one parent element in this piece of JSX. So we can go here and just wrap this in a div.

[04:39 - 04:45] Awesome. And then maybe after this, I can make sure that we render a profile image as well.

[04:46 - 05:06] So we'll say profile.images.length. And if the first item in the images array has a URL, we'll render an image tag and we'll say profile.images.

[05:07 - 05:14] The first image. Give that a save.

[05:15 - 05:20] And awesome. And it looks like all of the data came through.

[05:21 - 05:39] So if we scroll back up to our use effect hook here, you may notice that we're wrapping our async function in a try catch block. And that's because we want to make sure if there's any errors when awaiting this promise that we handle our errors.

[05:40 - 05:52] And turns out there's a way we can dry this up a bit and we can do that with a higher order function. So higher order functions are functions that operate on other functions either by taking them as arguments or by returning them.

[05:53 - 06:14] And in our case, our higher order function is going to take an asynchronous function, in this case fetch data, as an argument and wrap our asynchronous code in a try catch for us. So if we head on over to our client directory and we create a utils.js file.

[06:15 - 06:38] And in here, we'll add our catch errors, higher order function, which takes a function as an argument and returns a function, which returns a function that has a catch chained onto it. Then in our app.js file, we can import this catch errors function and wrap our fetch data function in it.

[06:39 - 06:53] So first we'll go up here and say import catch errors from utils. And then down here in our use effect hook, we can get rid of this try catch block.

[06:54 - 07:10] And instead wrap this fetch data invocation in a catch errors, our order function. Cool, so this is a pattern we're going to be using frequently as we build out the other parts of our app. So keep it in mind.