Build Youtube in React 35: Fetching related videos

1 Overview

Currently, our related videos section looks a little bit empty.

Click on the image to see it in high resolution.

Well, how hard can it be 😁?

2 Fetching related videos from Youtube API

2.1. Leveraging the Youtube search endpoint to fetch related videos

Our goal is to get related videos for a particular video id we send along in our request. How does that work?

It’s actually pretty easy, we just need to make use of the Youtube search endpoint.

Please have a look at the Youtube search endpoint in the API explorer.

We just need to kick off a new search and add the video id in the relatedTo field of our request.

A search response might look like this:

For brevity, we are just showing one object in the items array. Unfortunately, the search endpoint only provides us with basic information about the video. We cannot fetch more metadata such as view count and like count. Since we want our app to look and behave pretty much like the original Youtube app, we need to chain some request.

Here’s how we solve this: We fire a search request to the Youtube endpoint, extract the video ids for the related videos and fetch the detailed information in a second request.

Of course, this increases the complexity of our React app. I also don’t like this approach a lot, but as far as I can tell, there’s no other way to get this information. Now, I can hear you folks already screaming: GraphQL, GraphQL, GraphQL 🤓.

Yes, I was thinking that too. But the Youtube backend doesn’t support that. So for now, we need to chain our requests together. See it as a nice exercise. If you chain request together and perform multiple requests concurrently, you really understand how to do side effects in React.

There’s also one more thing I’d like to point out about the response. Note that id is not just a string but an object which contains a type and the actual videoId. We will need this insight later on.

2.2. Let’s talk about state

We need to store our related videos somewhere. Let’s just take the very same approach we had with videos.mostPopular and videos.byCategory. We will add a new object inside our videos state and call it related. This object will have the following format.

The above example state pretends that there are only two related videos. In reality, there are much more. This is just an example state to illustrate how we will incorporate the concept of related videos into our global state. Our related object associates video ids with objects.

Each object contains the nextPageToken, in case we want to fetch more videos later on. It also contains the total amount of available related videos. The items array contains the video ids of the related videos. Note that we still store all the video details in our big videos.byId object to have everything in one place. We get the detailed information from the second request we will fire later on.

To recap, this is how our entire Redux state might look like:

2.3. Building a Youtube API search request

We already know to which endpoint we want to reach out. Let’s just add another function inside src/store/api/youtube-api

We’re reaching out to the search endpoint and fetch 12 videos per default that are related to the videoId parameter.

Since this request will be part of the WATCH_DETAILS action, we don’t need to create a new action creator for it.

2.4. Adapting our WATCH_DETAILS saga

I already mentioned that we will fire multiple requests when we render our Watch component. This is exactly what we will do right now. So head over to your src/store/sagas/watch.js file and add the related videos request in here.

2.5. Updating the WATCH_DETAILS reducer

There’s already have some logic in our WATCH_DETAILS reducer. We’re already parsing our video detail request.

Let’s put our parsing logic for the related videos inside a separate function.

Let’s pick the very same approach we used previously and first filter our responses array for the right kind of response. If you have a look at the example response from the search endpoint above, you see that its field kind has the value youtube#searchListResponse.

Once we have the right response, we extract the nextPageToken, the items array and the pageInfo object from it.

Finally we return an object where we store the total amount of results, the next page token and the video ids.

Have a close look on how we get the video ids. Note that we map over all items and access the videoId field from the id object. The search endpoint does not return a string in the id field, but an object. Make sure to have a look at the id field in the example response above.

Now we just need to update our reduceWatchDetails function.

2.6. Checking if our magic works

Let’s try it out and check our Redux Dev tools to see if our logic works.

When you click on some video in the Home feed you should see something like this:

Nice, we now have the related video ids. Once we have n related video ids, we need to fire n requests to the Youtube Videos endpoint to get more detailed information. In particular, we are interested in the video statistics, i.e. the likes and the total amount of views.

2.7. Video details action

The follow-up requests we perform after we got the related video ids need to flow throw a reducer at some point. To stay consistent, we need to add an action creator so we can dispatch an action once we got the result. Ok, so let’s call this action VIDEO_DETAILS because we are fetching specific information for one particular video.

Head over to your src/store/actions/watch.js file and add this

Since our video details request is a chained network request, it will not be triggered by a direct user action, that’s why we throw an error in the request filed of it. Apart from that, we provide both a success and failure function which dispatch a VIDEO_DETAILS_SUCCESS / VIDEO_DETAILS_FAILURE action once we got the result. Nothing special here.

3 Wrap Up

Ok, let’s stop here for now and continue this in the next tutorial.

Otherwise this blog posts gets way too long.

Thanks for reading, you can find  all the code on Github.

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.