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 @productioncoderPlease 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.
Recent Comments