#Still Need Support | Caching Data From Api Calls Globally

28 messages · Page 1 of 1 (latest)

granite sun
#

I want to call the youtube api for the 3 most recent videos from 3 different channels. At the moment I’m able to do this but the problem is that the site calls the youtube api for the data every time the page is loaded and youtube has a low quota for that much data. Is there a way to globally cache data so that all users see the same cached videos every time they visit the site, then just call the youtube api every 2-3 hours for an updated list?

unborn baneBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

slate marsh
#

Show your fetching function

#

Ideally nextjs will have cached the fetch

#

Unless you opted out somehow

granite sun
# 
    const fetchVideos = async () => {
        const apiKey = process.env.YT_API_KEY;
        const headeddChannel = process.env.YT_HEADEDD_ID;
        const url = `https://www.googleapis.com/youtube/v3/search?key=${apiKey}&channelId=${headeddChannel}&part=snippet&order=date&maxResults=${3}`;

        try {
            const data = await fetch(url);

            if (!data.ok) {
                console.log(data.statusText)
            }

            return await data.json();
        } catch (error) {
            console.log(error);
        }
    }
granite sun
#

Just from force reloading the page a few times I've reached 30% of the quota limit

#

Still Need Support | Caching Data From Api Calls Globally

#

Would something like this possibly work using node-cache, or is there an easier/better way implemented in nextjs already?

import NodeCache from 'node-cache';

const cache = new NodeCache({ stdTTL: 10800 });

const fetchAndCache = async (url: string, cacheKey: string) => {

    const cachedData = cache.get(cacheKey);
    if (cachedData) {
        return cachedData;
    }

    try {
        const response = await fetch(url);

        if (!response.ok) {
            console.error(response.statusText);
            return null;
        }

        const data = await response.json();

        cache.set(cacheKey, data);
        return data;
    } catch (error) {
        console.error(error);
        return null;
    }
};

export const fetchHeadeddVideos = async () => {
    const apiKey = process.env.YT_API_KEY;
    const headeddChannel = process.env.YT_HEADEDD_ID;
    const url = `https://www.googleapis.com/youtube/v3/search?key=${apiKey}&channelId=${headeddChannel}&part=snippet&order=date&maxResults=3`;

    return await fetchAndCache(url, 'headeddVideos');
};

export const fetchHeadedCSGOVideos = async () => {
    const apiKey = process.env.YT_API_KEY;
    const headedCSGOChannel = process.env.YT_HEADEDCSGO_ID;
    const url = `https://www.googleapis.com/youtube/v3/search?key=${apiKey}&channelId=${headedCSGOChannel}&part=snippet&order=date&maxResults=3`;

    return await fetchAndCache(url, 'headedCSGOVideos');
};
slate marsh
slate marsh
granite sun
#

wdym

slate marsh
#

npm run dev

granite sun
granite sun
#

also have it on production now and the node-cache system is working as intended

slate marsh
granite sun
#

gotchya

slate marsh
#

Dev matches prod cache in the current versions, but on force reloading you essentially disable the cache, this can also be done by disabling cache in the network tab

slate marsh
#

Everything cache related can be done in house with just nextjs

granite sun
#

Sounds good, think it’s even worth messing with if it’s already working though?

slate marsh
#

Enable full url logging, then you can see that it does have it cached (this works on dev as well)

slate marsh
granite sun
#

Appreciate it

slate marsh