Aggregate all public trpc procedures under a common url prefix

[jonluca]

I'm trying to set up smart cloudflare cacheing rules in front of a trpc server.

Is there a clean way to differentiate between public and protected procedures? Or to change the url schema within trpc/server?

Right now all requests will go to something like /api/trpc/model.queryFunction

It would be great if we had control over the url schema so that all query functions that were under the base t.procedure had a common url schema, so I could add a simple cacheing rule for all fo them that is way more aggressive / not based on the users cookie/auth.

[Nick-Lucas]

There are 2 ways you can already do this. First one is you put all your public procedures together in a router, which is exactly what you’re asking for. Second is you could mount 2 tRPC instances with separate prefixes and then use a splitLink on the client to direct requests to them.

When you add batching into the mix, the latter becomes preferred since all the routes become comma separated after the prefix. We have an example here https://github.com/trpc/trpc/tree/main/examples/soa

[warflash]

Hi @jonluca, curious what solution you went with if you don't mind.
We're in the same boat currently trying to figure out how to easily determine which procedures should be cached and which ones shouldn't.
Thanks!

[jonluca]

We added a new middleware router that caches based on the inputs. This is using trpc v11 with getRawInput:

It constructs a key based on the path, the inputs, and whether the route should be cached publicly for all users or on a per user basis.

import superjson from "superjson";
import { redisConnectionPromise, redis } from "./redis";
import { hashKey } from "@tanstack/react-query";
const middlewareMarker = "middlewareMarker" as "middlewareMarker" & {
  __brand: "middlewareMarker";
};
const timeoutGetCached = async (key: string) =>
  new Promise<string | null>(async (resolve) => {
    setTimeout(() => {
      resolve(null);
    }, 500);
    try {
      const cachedData = (await redis.get(key)) as string;
      resolve(cachedData);
    } catch (e) {
      console.error(e);
    }
    resolve(null);
  });

const deploySha = process.env.DEPLOY_SHA


const cacheMiddleware = t.middleware(async ({ ctx, next, path, type, getRawInput }) => {
  if (type !== "query" || env.DEBUG_LOG === "debug") {
    return next();
  }
  const isAuthed = !!ctx.user;
  let key: string | undefined;
  if (ctx.overrideCacheKey) {
    key = ctx.overrideCacheKey;
  } else {
    const isPrivate = ctx.isPrivate;
    const prefix = (isPrivate && isAuthed && ctx.user?.id) || "unauth";
    const keyParts = [prefix, path, deploySha];
    const rawInput = await getRawInput();
    if (rawInput) {
      keyParts.push(rawInput as string);
    }
    key = hashKey(keyParts);
  }

  try {
    const timeout = new Promise((resolve) => setTimeout(resolve, 500));
    await Promise.race([redisConnectionPromise, timeout]);
    if (redis.isReady) {
      const cachedData = await timeoutGetCached(key);
      if (cachedData) {
        return {
          ok: true,
          data: superjson.parse(cachedData),
          ctx,
          marker: middlewareMarker,
        };
      }
    }
  } catch (e) {
    console.error(e);
  }

  const result = await next();

  // data is not defined in the type MiddlewareResult
  if (result.ok && "data" in result && redis.isReady) {
    const baseCacheDuration = isAuthed ? 5 : 30;
    const cacheDuration = ctx.cacheDuration ?? baseCacheDuration;
    const dataCopy = superjson.stringify(result.data);
    try {
      const timeout = new Promise((resolve) => setTimeout(resolve, 500));
      await Promise.race([
        redis.set(key, dataCopy, cacheDuration === "forever" ? undefined : { EX: cacheDuration }),
        timeout,
      ]);
    } catch (e) {
      console.error(e);
    }
  }

  return result;
});

And then we created a new procedure prefix to support different cache durations

/**
 * Public (unauthenticated) procedure
 *
 * This is the base piece you use to build new queries and mutations on your tRPC API. It does not
 * guarantee that a user querying is authorized, but you can still access user session data if they
 * are logged in.
 */
export const publicProcedure = baseProcedure.use(cacheMiddleware);


const extraLongCacheMiddleware = (duration: number) =>
  t.middleware((opts) => {
    const { ctx, next } = opts;
    return next({
      ctx: {
        ...ctx,
        cacheDuration: duration,
      },
    });
  });

export const publicProcedureLongCache = baseProcedure.use(extraLongCacheMiddleware(5 * 60)).use(cacheMiddleware);

[warflash]

That is great info, thank you a ton! The "per user" and "public" cache distinction is very nice as well