Next.js Discord

Discord Forum

Ran into a problem with unstable_cache and cookies in dynamic route

Unanswered
Orinoco Crocodile posted this in #help-forum
Open in Discord
Orinoco CrocodileOP
I have a dynamic route that's calling a function with unstable_cache inside. The function looks like this 

export async function getResume(resumeId: string) {
    const client = createClient();
    const { data: { user } } = await client.auth.getUser();
    if (!user) {
        redirect('/auth')
    }
    const userId = user.id
    const tags = ['resumes', resumeId]

    return unstable_cache(
        async (resumeId, userId) => await fetchResume(client, { resumeId, userId }),
        tags,
        { tags: [`resumes-${resumeId}`] }
    )(resumeId, userId)
}

fetchResume is an api call to supabase (Nothing fancy), but I get the error above. 
Route /resumes/747bd052-3c42-4c09-9206-0d11fdb665fc used "cookies" inside a function cached with "unstable_cache(...)". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "cookies" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/app/api-reference/functions/unstable_cache

My first intuition is the call to getUser which depends on the cookies, but then the error points to where the client is being created. The bug points to the documentation which I can't seem to figure out because there's just a line that talks about this in the documentation
- Accessing dynamic data sources such as headers or cookies inside a cache scope is not supported. If you need this data inside a cached function use headers outside of the cached function and pass the required dynamic data in as an argument.

Has anyone faced any issue like this before? What can I do to solve this?

Pss. Might also be a skill issue ☹️

12 Replies

@Orinoco Crocodile I have a dynamic route that's calling a function with `unstable_cache` inside. The function looks like this js export async function getResume(resumeId: string) { const client = createClient(); const { data: { user } } = await client.auth.getUser(); if (!user) { redirect('/auth') } const userId = user.id const tags = ['resumes', resumeId] return unstable_cache( async (resumeId, userId) => await fetchResume(client, { resumeId, userId }), tags, { tags: [`resumes-${resumeId}`] } )(resumeId, userId) } `fetchResume` is an api call to supabase (Nothing fancy), but I get the error above. Route /resumes/747bd052-3c42-4c09-9206-0d11fdb665fc used "cookies" inside a function cached with "unstable_cache(...)". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "cookies" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/app/api-reference/functions/unstable_cache My first intuition is the call to `getUser` which depends on the cookies, but then the error points to where the client is being created. The bug points to the documentation which I can't seem to figure out because there's just a line that talks about this in the documentation - Accessing dynamic data sources such as headers or cookies inside a cache scope is not supported. If you need this data inside a cached function use headers outside of the cached function and pass the required dynamic data in as an argument. Has anyone faced any issue like this before? What can I do to solve this? Pss. Might also be a skill issue ☹️
joulev
Just checking, does fetchResume depends on anything imported from next/headers?
@joulev Just checking, does fetchResume depends on anything imported from next/headers?
Turkish Van
It depends on cookies, passed client does use cookies.
Burmese
Would it be possible to see the fetchResume function as well?
Orinoco CrocodileOP
Sure, here's what the fetchResume looks like. AFAIK, it doesn't read any cookies or headers. 
export async function fetchResume(client: Client, options: { userId: string, resumeId: string }) {
    return await client.from('resumes')
        .select().eq('user_id', options.userId)
        .eq('id', options.resumeId).single()
}
@Turkish Van It depends on `cookies`, passed `client` does use `cookies`.
Orinoco CrocodileOP
It does mention server.ts where I create the supabase client for the server, but this doesn't make sense to me.
@joulev Just checking, does fetchResume depends on anything imported from next/headers?
Orinoco CrocodileOP
No, it just uses the passed client to fetch some data from supabase.
you get client from createClient from a server action using cookies making the client object dynamic

you then use the client object inside unstable cache
@Orinoco Crocodile No, it just uses the passed client to fetch some data from supabase.
Turkish Van
Yes, it uses the passed client which depends on cookies so fetchResume does depend on cookies.
Turkish Van
Would it work this way, if You passed the client also, as an argument?
return unstable_cache(
    async (client, resumeId, userId) => await fetchResume(client, { resumeId, userId }),
    tags,
    { tags: [`resumes-${resumeId}`] }
)(client, resumeId, userId)
Orinoco CrocodileOP
Passing the client as an argument also doesn't solve it, but I found another way around. I'll reproduce if I have some time later today. Thank you so much!