tRPC, SSR, Cloudflare

[peterhirn]

I've been experimenting with tRPC on Cloudflare recently.

I started by implementing tRPC as described in the official documentation and quickly realized that SSR + tRPC doesn't work on Cloudflare at all. The problem is that tRPC by default creates an actual http request to localhost when running in SSR (seems inefficient). On Cloudflare (and probably other similar runtimes) there is no localhost, therefore SSR fails.

After some research I discovered an ongoing discussion in the tRPC repo about this topic: trpc/trpc#3768

I copied the suggested fix from this issue and adapted it to SolidStart.

/src/lib/trpc/client.ts

import { isServer } from "solid-js/web";

import {
  type CreateTRPCProxyClient,
  createTRPCProxyClient,
  loggerLink,
  httpBatchLink
} from "@trpc/client";

import type { AppRouter } from "~/lib/trpc/router.js";

export type Client = CreateTRPCProxyClient<AppRouter>;

export const createClient = (request?: Request): Client =>
  createTRPCProxyClient<AppRouter>({
    links: [
      loggerLink({
        enabled: (opts) =>
          import.meta.env.DEV ||
          (opts.direction === "down" && opts.result instanceof Error)
      }),
      httpBatchLink({
        url: "/api",
        fetch: (input, init) =>
          isServer && request && init
            ? import("~/lib/trpc/fetchSsr.js").then((fetch) =>
                fetch.default(request, input, init)
              )
            : fetch(input, init)
      })
    ]
  });

/src/lib/trpc/fetchSsr.ts

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { createContext } from "~/lib/trpc/context.js";
import { appRouter } from "~/lib/trpc/router.js";

const fetchSsr = async (
  request: Request,
  input: URL | RequestInfo,
  init: RequestInit
) => {
  const headers = new Headers(request.headers);
  Object.entries(init.headers ?? {}).forEach(([k, v]) => headers.set(k, v));
  init.headers = headers;

  const origin = new URL(request.url).origin;
  const req = new Request(`${origin}${input}`, init);

  return await fetchRequestHandler({
    endpoint: "/api",
    req,
    router: appRouter,
    createContext
  });
};

export default fetchSsr;

/src/lib/trpc/Provider.tsx

import { type ParentComponent, type Context, createContext, useContext } from "solid-js";
import { useRequest } from "solid-start/server";
import { isServer } from "solid-js/web";

import { type Client, createClient } from "~/lib/trpc/client.js";

const TrpcContext = createContext() as Context<Client>;

export const TrpcProvider: ParentComponent = (props) => {
  const event = useRequest();
  const client = createClient(isServer ? event.request : undefined);

  return <TrpcContext.Provider value={client}>{props.children}</TrpcContext.Provider>;
};

export const useTrpcClient = () => useContext(TrpcContext);

Caveats

• I had to use a inline import import("~/lib/trpc/fetchSsr.js") to get rid of warnings in dev about importing @trpc/server on the client. Maybe there is a better/cleaner way to do this.
• Copying the request headers has the potential for introducing serious security issues (eg. SSR of content which shouldn't be available for given user/request)

Questions

• Any ideas on how to improve/simplify this code?
• Would you like to see this (or a improved version) integrated in the with-trpc example or official documentation?

Cheers 🥤