Leverage caching for third party api with cookie header

[zwelhtetyan]

Summary

I have to call third party backend api(that need token in request header) from my nextjs app. I want to leverage next caching for those api requests. But because of dynamic cookie, I can't cache those normally. How can I still leverage caching with dynamic cookie header.

export const api = ky.create({
  prefixUrl: BASE_URL,
  hooks: {
    beforeRequest: [
      async ({ headers }) => {
       // setting token from cookie in request header

        const cookieStore = await cookies()
        const token = cookieStore.get('token')?.value

        const name = "Authorization"

        if (token) {
          headers.set(name, `Bearer ${token}`)
        } else {
          headers.delete(name)
        }
      },
    ],
  },
})

const postApi = api.extend(({ prefixUrl }) => ({
  prefixUrl: `${prefixUrl}/posts`,
}))

export const getPosts = unstable_cache(() => {
  return postApi.get("").json<Post[]>()
})

// Error: Cookies can only be modified in a Server Action or Route Handler

Additional information

No response

Example

No response