Theo's Typesafe Cult•13mo ago

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)

2 Replies

berniOP•13mo ago

also, wanted to mention that there's no problem with making this work if I'm calling a regular serverless endpoint (from an edge function) rather than a trpc endpoint

Anshu•11mo ago

Did you find any way to fix it?

Gaming

Programming

Caching trpc responses when calling from edge to serverless (vercel)