Nuxtstop

For all things nuxt.js

Connecting with the YouTube API in Telescope

#opensource #react #api #youtube
7 1

Update:

In the last blog post, I mentioned that I worked on a simple YouTube information banner, but it was somewhat incomplete because the subscriber and view count was showing negative numbers.

The reason for this was that in Telescope, we don't actually store that video information, since it is not included in the YouTube articles given by the feed. Instead, we would need to request YouTube for that information.

So, YouTube offers an API just for this. You can use it for more than just requesting statistics though. For example, you can send requests to your API to start a livestream, or upload a video.

How did I make it work?

Well, while it was somewhat straightforward, the journey to the conclusion wasn't as simple as I thought.

In JavaScript, any kind of HTTP request you'd make through modern APIs is asynchronous. This makes sense, because if you make it synchronous, you would block the execution of the script, which can make your UI freeze (that horrible experience of having your page freeze and then turn slightly white in Windows...)😤🥴. While this is nice, it is somewhat annoying when you are working with React.

Normally, I wouldn't say this. Making requests with React is simple, since React will update the UI when you change the state (through the useState hook, of course). However, if the code that does the request and changes the state is not written in a specific component, but instead written in a custom hook, then everything changes.

Things that happened:

When I worked on it for the first time, something like this would happen:

  1. When the React element would get constructed, it would call the function that does the request.
  2. Since the request is made on a promise (and we are not awaiting), the code continues running while the request to YouTube occurs.
  3. The element, with the default values, will now appear.
  4. The request is finished and you update the values. Since these values were not updated through any kind of hook, React does not know about these changes.
  5. If you force a redraw (maybe by resizing the window), the correct values would be properly shown automagically.

Of course, an application that works like that is unacceptable, so I knew I was doing something extremely bad that goes against React's principles.

So, after understanding what was going on (I was updating the values without a proper hook), I started to fix it little by little. The first step was changing this:

let objA = { value: -1 };

fetch(...).then(res => { objA.value = res.body.json().value });
Enter fullscreen mode Exit fullscreen mode

I had to do something like this:

const [value, setValue] = useState(-1);

useEffect(() => {
    fetch(...).then(res => { setValue(res.body.json().value) });
}, []);
Enter fullscreen mode Exit fullscreen mode

I wrap the fetch request in a useEffect because I want to cause a side effect.

However, the main problem was that the original function that contains the code is not a hook! So I had to rearrange a lot of stuff throughout the code so that it uses the function as a hook instead of a regular function. If I didn't do that, the linter would warn against it, and I do not want to go against the linter 😅

Conclusion:

After that crazy journey, I managed to make it work, which was my end goal! Look forward to the PR!

Add comment