berni
berni
TTCTheo's Typesafe Cult
Created by berni on 12/11/2023 in #questions
Caching trpc responses when calling from edge to serverless (vercel)
Has anyone had luck caching trpc responses when making fetch calls from edge function to a serverless function (deployment on vercel). I never seem to be able to get the cache working in such setup. Example code snipped in the edge function:
const client = createTRPCProxyClient<AppRouter>({
links: [
httpLink({
url: `https://${env.VERCEL_URL}/api/trpc`,
async fetch(url, options) {
console.log("Fetching at URL", url);
console.log("CONTEXT SHOWS HERE", options, "url", url)
return await fetch(url, options);
},
}),
],
transformer: superjson,
});

const data = await client.router.testCache.query();
return data
const client = createTRPCProxyClient<AppRouter>({
links: [
httpLink({
url: `https://${env.VERCEL_URL}/api/trpc`,
async fetch(url, options) {
console.log("Fetching at URL", url);
console.log("CONTEXT SHOWS HERE", options, "url", url)
return await fetch(url, options);
},
}),
],
transformer: superjson,
});

const data = await client.router.testCache.query();
return data
Then in /pages/api/trpc/[trpc].ts I've got the follownig in order to add a cache header.
responseMeta(opts) {
const { ctx, paths, errors, type } = opts;
const allOk = errors.length === 0;
// checking we're doing a query request
const isQuery = type === 'query';
if (allOk && isQuery) {
console.log("YES, CACHE IT");
const ONE_DAY_IN_SECONDS = 60 * 60 * 24;
return {
headers: {
'cache-control': `s-maxage=1, stale-while-revalidate=${ONE_DAY_IN_SECONDS}`,
'set-cookie': '',
},
};
}
return {};
},
responseMeta(opts) {
const { ctx, paths, errors, type } = opts;
const allOk = errors.length === 0;
// checking we're doing a query request
const isQuery = type === 'query';
if (allOk && isQuery) {
console.log("YES, CACHE IT");
const ONE_DAY_IN_SECONDS = 60 * 60 * 24;
return {
headers: {
'cache-control': `s-maxage=1, stale-while-revalidate=${ONE_DAY_IN_SECONDS}`,
'set-cookie': '',
},
};
}
return {};
},
when checking the vercel logs I'm aways gettint a cache MISS and I never see the cached value being returned. Inspecting the response headers that get to edge function recieves, it looks that the cache-control is getting stripped and replaced with different value (public, max-age=0, must-revalidate)
4 replies