Build Youtube in React 21: Exploring the Youtube data API

1 Overview

It’s finally time to fill our components with real data. We are now about to actually load some data from the Youtube API. In this tutorial, we’ll shed light on how the Youtube API is structured and explain some general concepts that will be important for the upcoming tutorials.

But what data do we need to load anyway? Let’s start with the Home feed.

Click on the image to see it in high resolution.

Let’s have a closer look. In the first section we display the top 12 most popular videos on Youtube. This means that we somehow have to load them from our backend.

After the most popular videos section, we have additional sections grouped by specific categories. In the mockup above you can see that we have the category Lifestyle. So we also somehow need to know what kinds of video categories there are. Once we know the categories, we can fetch the most popular videos for a particular category and display them accordingly.

2 Exploring the Youtube API

But let’s take one step at a time and familiarise ourselves first with the Youtube API first.

Please head over to their website and dig a little bit into the docs.

I know all the endpoints can be a little bit overwhelming at first, but I can assure you that you’ll get the hang on it 😁.

2.1. Youtube API explorer

Youtube offers an interactive API explorer that allows you to send requests to their endpoint and see the responses. Let’s play around with it a little bit.

When you click on an endpoint in the left sidebar in the API documentation, you see the endpoints details and can try them out by clicking the Load in API Explorer button underneath the blue button. The screenshot below shows the Videos resource.

Click on the image to see it in high resolution.

2.2. Youtube API parameters

I’ve selected the Videos endpoint in the API explorer because we will pull information data from this endpoint later on. Now if you clicked the button, you should see something like this.

The API explorer is so handy because we can play around with all the parameters that the endpoint offers. Apparently, different endpoints have different parameters, but there is one thing they pretty much have all in common and that is the part and fields parameter.

2.3. Youtube API part parameter

Let’s look at an example to make this clear. An endpoint might be able to return the following information.

Let’s just assume that the snippet, contentDetails and statistics object contain a lot properties. Youtube’s part: ??? functionality allows you to specify which top level objects you want the endpoint to return. By specifying part: snippet, you instruct the endpoint to only return you the snippet object. If you wanted the endpoint to return multiple objects, you can specify a comma separated list. E.g. part: snippet,contentDetails will return both snippet and contentDetails but not statistics. Like so, we can prevent over fetching and have a quicker response time.

2.4. Youtube API fields parameter

The part parameter is often used in conjunction with the fields parameter. The field parameter allows you to specify exactly which field from the response you want to get. The API explorer offers a simple UI with checkboxes where you can select the desired fields. You can open this dialog by clicking on the Use fields editor button.

Have a look at the fields string this dialog generates. For my selection, I got

You can immediately see that this is a textual representation of the fields we selected. In a simplified way, this expression means the following:

We want to get the items object back, but from this object, we only want the id and the snippet. We also want the statistics object that lives inside items, but not everything, only commentCount, likeCount and viewCount. As you can imagine this string can get quite long. But in fact that’s not really a big problem because we can simple use this graphical editor to generate it.

Similar to GraphQL, this mechanism allows you to prevent over fetching. However, we can say that the GraphQL interface is more powerful and more readable.

2.5. Executing a request with the Youtube API explorer

If you click the blue execute button, you get the endpoint’s result back. You also see the URL where we send the request to. Note that if you open the API explorer, the id field is pre-filled with some video id (Ks-_Mh1QhMc). We just left it as it is for this demo.

 

If you paste this URL in your browser’s search bar and replace {YOUR_API_KEY} with your Youtube API key, you should see the same response as above.

3 Youtube API helper

Almost there, we’re preparing to do our first API request programatically.

Now please head over to an arbitrary endpoint at the Youtube data API documentation and click on Javascript tab in the code sample. Here you can see how this request looks like in code. Per default, this view only shows a code snippet and not the entire code we need to make an API call programatically. We can see a full example code when toggling the snippet - full example switch. Here’s a screen shot.

The code snippet also contains an OAuth 2 flow to authenticate a user so we can make changes to the user’s Youtube account. For now, we won’t need this because we’ll only fetch publicly available data. Let’s just create a new file and put Youtube's boilerplate code in there so we don’t have to worry about it any more.

1. Create a new directory inside src/store and call it api
2. Add a new file called youtube-api.js inside the directory you just created

I’ve modified the code a little bit because it creates some warnings. The warnings pop up because the code sometimes uses == instead of ===.

I think it’s kind of pointless to go over this boilerplate code because Youtube might change it in the future anyway. To be honest, I was also surprised when I saw that this kind of boilerplate code is really needed. It would have been more convenient to put it into the library so third party developers don’t have deal with it.

The most important takeaway here is that the boilerplate code includes a method called buildApiRequest which allows us to create a request object that behaves similar to a promise (because it is thenable).

4 Wrap Up

That’s it for the Youtube endpoint introduction. We now introduced the basic structure to make requests to Youtube's endpoints later on.

As always, thanks for reading and following along. I really appreciate that.

The project’s code can be found in our Github repository.

Follow @productioncoder

Please follow me on Twitter @productioncoder to stay up-to-date. I’m happy to receive feedback of any kind.

If you are interested in more high-quality production-ready content, please enter your email below.