3 replies

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

/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

public, max-age=0, must-revalidate

)

TTC

Theo's Typesafe Cult•3y ago•

3 replies

berni

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

    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

/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 {};
      },

public, max-age=0, must-revalidate

public, max-age=0, must-revalidate

)

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads