Theo's Typesafe Cult•2y ago

Lambdas and Edge functions in same tRPC Project?

How do you create a trpc app that uses both Lambdas and Edge functions (NextJS specifically)? Do you need to create two separate routers? Been struggling to find the right way to do this.

8 Replies

cje•2y ago

from what i understand this currently isn't possible without splitting the router. would be a great thing to bring up on the trpc discord or github issues/discussions

ezra8679OP•2y ago

Yeah splitting the router is what I did. Not the worst thing in the world to do. Thanks for the answer 🙂

Gabriel•2y ago

Did you add TRPc to both Edge and Lambda? Just curious

ezra8679OP•2y ago

Yeah i have two routers with two different urls. I use a splitLink to determine which url to pick. New to T3 so there prob is a better way to do this but this works.

export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      /**
       * Transformer used for data de-serialization from the server.
       *
       * @see https://trpc.io/docs/data-transformers
       */
      transformer: superjson,

      /**
       * Links used to determine request flow from client to server.
       *
       * @see https://trpc.io/docs/links
       */
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        splitLink({
          condition(op) {
            const isEdge = op.path.includes("edge") === true;
            return isEdge;
          },
          true: httpBatchLink({
            url: `${getBaseUrl()}/api/trpc/edge`,
            headers: {
              Authorization: authToken,
            },
          }),
          false: httpBatchLink({
            url: `${getBaseUrl()}/api/trpc/lambda`,
            headers: {
              Authorization: authToken,
            },
          }),
        }),
      ],
    };
  },
  /**
   * Whether tRPC should await queries when server rendering pages.
   *
   * @see https://trpc.io/docs/nextjs#ssr-boolean-default-false
   */
  ssr: false,
});

export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      /**
       * Transformer used for data de-serialization from the server.
       *
       * @see https://trpc.io/docs/data-transformers
       */
      transformer: superjson,

      /**
       * Links used to determine request flow from client to server.
       *
       * @see https://trpc.io/docs/links
       */
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        splitLink({
          condition(op) {
            const isEdge = op.path.includes("edge") === true;
            return isEdge;
          },
          true: httpBatchLink({
            url: `${getBaseUrl()}/api/trpc/edge`,
            headers: {
              Authorization: authToken,
            },
          }),
          false: httpBatchLink({
            url: `${getBaseUrl()}/api/trpc/lambda`,
            headers: {
              Authorization: authToken,
            },
          }),
        }),
      ],
    };
  },
  /**
   * Whether tRPC should await queries when server rendering pages.
   *
   * @see https://trpc.io/docs/nextjs#ssr-boolean-default-false
   */
  ssr: false,
});

cje•2y ago

thats a pretty good implementation iirc julius did a lot of router splitting in the cal.com codebase, maybe take a look there if you want some more inspiration

ezra8679OP•2y ago

ooh ty 🙂

Gabriel•2y ago

Also curious: Do you use kysely, or drizzle?

ezra8679OP•17mo ago

Drizzle sorry for the late reply

Gaming

Programming

Lambdas and Edge functions in same tRPC Project?