Build Youtube in React 35: Fetching related videos
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
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.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
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
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
We’re reaching out to the
search endpoint and fetch
12 videos per default that are related to the
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
Once we have the right response, we extract 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
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
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
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_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.