jaiv•2y ago

API Response caching not working on vercel ⁉

I've followed the instructions in https://trpc.io/docs/v9/caching for API Response caching and it's not working when hosted on vercel. The headers are getting set on localhost which tells me the code is working, but once it's hosted on vercel the cache headers aren't being set. Does anyone have any ideas what's wrong? My code (almost the exact same as the example shown here: https://trpc.io/docs/v9/caching#api-response-caching)

import { createNextApiHandler } from "@trpc/server/adapters/next"
import { appRouter, createContext } from "server"

const ONE_DAY = 60 * 60 * 24

export default createNextApiHandler({
  router: appRouter,
  createContext,
  onError({ error }) {
    console.error(error)
  },
  batching: { enabled: true },
  responseMeta({ ctx, errors, paths, type }) {
    const allPublic = paths && paths.every(path => path.includes("!"))
    const noErr = errors.length === 0
    const isQuery = type === "query"

    if (ctx?.res && allPublic && noErr && isQuery) {
      // Cache request for 1 day + revalidate once every second
      return {
        headers: {
          "Cache-Control": `s-maxage=1, stale-while-revalidate=${ONE_DAY}`,
        },
      }
    }
    return {}
  },
})

import { createNextApiHandler } from "@trpc/server/adapters/next"
import { appRouter, createContext } from "server"

const ONE_DAY = 60 * 60 * 24

export default createNextApiHandler({
  router: appRouter,
  createContext,
  onError({ error }) {
    console.error(error)
  },
  batching: { enabled: true },
  responseMeta({ ctx, errors, paths, type }) {
    const allPublic = paths && paths.every(path => path.includes("!"))
    const noErr = errors.length === 0
    const isQuery = type === "query"

    if (ctx?.res && allPublic && noErr && isQuery) {
      // Cache request for 1 day + revalidate once every second
      return {
        headers: {
          "Cache-Control": `s-maxage=1, stale-while-revalidate=${ONE_DAY}`,
        },
      }
    }
    return {}
  },
})

(first image is vercel's headers, the second is from localhost)

Response Caching | tRPC

The below examples uses Vercel's edge caching to serve data to your users as fast as possible.

1 Reply

jaiv•2y ago

ping me if you can help, thank you :) it's a very weird issue