How to make Nextjs/Vercel cache 'fetch' results based only on URL? | Next.js | Page 1

candid aurora Oct 19, 2024, 7:10 PM

#

I have a GET route handler that makes a fetch request to an external API like this:

fetch(url, {
    headers: { Authorization: `Bearer ${accessToken}` },
    next: {
        revalidate: ONE_WEEK_IN_SECONDS,
    },
});

Since accessToken changes every hour I'm assuming I'll get a cache miss for the same URL after an hour? If so how can I get cached results in this case?

viral patrolBOT Oct 19, 2024, 7:10 PM

#

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)

bitter sequoia Oct 20, 2024, 7:05 AM

#

candid aurora I have a GET route handler that makes a fetch request to an external API like th...

you can't use the cache, when you have an Authorization header inside your request. You automatically opt out of the caching mechanism. However: when you wrap it with a unstable_cache and pass the accesstoken as parameter, you will be able to use the cache, because only the result will be cached

Functions: unstable_cache | Next.js

API Reference for the unstable_cache function.

candid aurora Oct 20, 2024, 7:50 AM

#

@bitter sequoia Thanks for the suggestion. I looked into the docs for unstable_cache, will this code work as expected and cache the result of fetchGenres() for one week?

async function fetchGenres() {
    const url = '';
    const accessToken = await getAccessToken();
    const res = await fetch(url, {
        headers: { Authorization: `Bearer ${accessToken}` },
    });
    const data = await res.json();
    return data.genres;
}

const ONE_WEEK_IN_SECONDS = 60 * 60 * 24 * 7;

const getCachedGenres = unstable_cache(async () => fetchGenres(), ['cached-genres'], {
    revalidate: ONE_WEEK_IN_SECONDS,
});