Here's how to setup trpc in a +server.ts endpoint instead of hooks.server.ts

[multiplehats]

Long story short, I'm using Prisma in my trpc routes, but I'm also using a few one off edge routes on Vercel that have nothing to do with my trpc routes.

However, if you use createTRPCHandle in hooks.server.ts, it will load all your routes and thus Prisma, which is not compatible on the edge.

After tweeting about this, @paoloricciuti made the suggestion to set it up on a single endpoint (similar to Next.js).

So I figured, I'll make a quick post to help others out.

Create a +server.ts route

Route should look like this: routes/api/trpc/[trpc] where the path can be anything.

Due the way the createTRPCHandle in this package is created, we can't directly use it and have to re-use some of the logic. Ideally this logic can be a separated exported function in this package that makes this easier in the future.

import { appRouter } from '$core/api/root';
import { createTRPCContext } from '$core/api/trpc';
import { resolveHTTPResponse } from '@trpc/server/http';
import type { RequestEvent } from '@sveltejs/kit';

async function trpc<
	Event extends RequestEvent<Partial<Record<string, string>>, string | null>,
>(event: Event) {
	const apiEndpointUrl = '/api/trpc';
	const { request, url } = event;
	const router = appRouter;
	const createContext = createTRPCContext;

	const req = {
		method: request.method,
		headers:  Object.fromEntries(request.headers.entries()),
		query: url.searchParams,
		body: await request.text()
	};

	const httpResponse = await resolveHTTPResponse({
		router,
		req,
		path: url.pathname.substring(apiEndpointUrl.length + 1),
		createContext: async () => createContext?.(event),
		onError: import.meta.env.DEV
			? ({ path, error }) => {
					console.error(`❌ tRPC failed on ${path ?? '<no-path>'}: ${error.message}`);
			  }
			: undefined
	});

	const { status, headers, body } = httpResponse as {
		status: number;
		headers: Record<string, string>;
		body: string;
	};

	return new Response(body, { status, headers });
}

export const GET = trpc;
export const POST = trpc;

Then in your helper (see the docs)

// lib/trpc/client.ts
import type { Router } from '$lib/trpc/router';
import { createTRPCClient, type TRPCClientInit } from 'trpc-sveltekit';

let browserClient: ReturnType<typeof createTRPCClient<Router>>;

export function trpc(init?: TRPCClientInit) {
  const isBrowser = typeof window !== 'undefined';
  if (isBrowser && browserClient) return browserClient;
  const client = createTRPCClient<Router>({ init, url: '/api/trpc' }); // Added -> url: '/api/trpc'
  if (isBrowser) browserClient = client;
  return client;
}