Public API

fetchRequestHandler

import { fetchRequestHandler } from '@trpc/server/adapters/fetch';

function fetchRequestHandler(opts: {
  endpoint: string;
  req: Request;
  router: AnyRouter;
  createContext: (opts: FetchCreateContextFnOptions) => object | Promise<object>;
  onError?: (opts: { error: TRPCError; req: Request; input: unknown; path: string | undefined }) => void;
}): Promise<Response>;

Use this handler with any runtime that speaks the Fetch API: Bun, Cloudflare Workers, Deno Deploy, Next.js App Router route handlers, and Vercel Edge Functions. Pass it the raw Request object and your appRouter; it returns a Response.

createTRPCClient

import { createTRPCClient } from '@trpc/client';

function createTRPCClient<TRouter extends AnyRouter>(opts: {
  links: TRPCLink<TRouter>[];
}): CreateTRPCClient<TRouter>;

Creates a fully typed RPC client. The generic parameter TRouter binds the client to the server's router type so all procedure names, inputs, and outputs are inferred. Use httpBatchLink for standard HTTP, wsLink for WebSocket subscriptions, or splitLink to route based on operation type.

splitLink

import { splitLink } from '@trpc/client';

function splitLink<TRouter extends AnyRouter>(opts: {
  condition: (op: Operation) => boolean;
  true: TRPCLink<TRouter> | TRPCLink<TRouter>[];
  false: TRPCLink<TRouter> | TRPCLink<TRouter>[];
}): TRPCLink<TRouter>;

Routes operations to different links based on a predicate. The canonical use case (shown in the Fastify example) is sending subscriptions over WebSockets and queries/mutations over HTTP batch links.

createWSClient

import { createWSClient } from '@trpc/client';

function createWSClient(opts: { url: string }): WebSocketClient;

Creates a persistent WebSocket connection used by wsLink. Call .close() to terminate. Required when using subscriptions over the wsLink transport.

Working examples

Scenario - Bun HTTP server with fetch adapter

A minimal Bun server that handles tRPC requests on /trpc and returns a plain response for the root path. No Node.js-specific APIs are needed.

import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { appRouter } from './router';

Bun.serve({
  port: 3000,
  fetch(request) {
    if (request.method === 'HEAD') {
      return new Response();
    }
    if (new URL(request.url).pathname === '/') {
      return new Response('hello world');
    }
    return fetchRequestHandler({
      endpoint: '/trpc',
      req: request,
      router: appRouter,
      createContext: () => ({}),
    });
  },
});

Scenario - Cloudflare Worker with fetch adapter

Deploy tRPC as a Cloudflare Worker using the WorkerEntrypoint class. The fetch method receives a standard Request and must return a Response.

import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { WorkerEntrypoint } from 'cloudflare:workers';
import { appRouter } from './router';

export default class TRPCWorker extends WorkerEntrypoint {
  async fetch(request: Request): Promise<Response> {
    return fetchRequestHandler({
      endpoint: '/trpc',
      req: request,
      router: appRouter,
      createContext: () => ({}),
    });
  }
}

Scenario - Typed client with WebSocket subscriptions (Fastify pattern)

Use splitLink to send subscriptions over WebSockets and all other operations over HTTP batch. Type-safety flows from AppRouter imported as a type only.

import {
  createTRPCClient,
  createWSClient,
  httpBatchLink,
  splitLink,
  wsLink,
} from '@trpc/client';
import superjson from 'superjson';
import type { AppRouter } from '../server/router';

const port = 3000;
const prefix = '/trpc';
const urlEnd = `localhost:${port}${prefix}`;

const wsClient = createWSClient({ url: `ws://${urlEnd}` });

const trpc = createTRPCClient<AppRouter>({
  links: [
    splitLink({
      condition(op) {
        return op.type === 'subscription';
      },
      true: wsLink({ client: wsClient, transformer: superjson }),
      false: httpBatchLink({ url: `http://${urlEnd}`, transformer: superjson }),
    }),
  ],
});

// Query
const version = await trpc.api.version.query();

// Subscription
const sub = trpc.sub.randomNumber.subscribe(undefined, {
  onData(data) {
    console.log('received:', data);
    sub.unsubscribe();
  },
  onError(err) {
    console.error(err);
  },
});

Scenario - Deno Deploy handler

Deno Deploy uses the Fetch API natively. The pattern is identical to Bun and Cloudflare Workers.

import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { appRouter } from './router.ts';

function handler(request: Request) {
  if (request.method === 'HEAD') {
    return new Response();
  }
  return fetchRequestHandler({
    endpoint: '/trpc',
    req: request,
    router: appRouter,
    createContext: () => ({}),
  });
}

Deno.serve(handler);

File walkthrough

• examples/bun/src/index.ts - Entry point for the Bun example; serves tRPC via fetchRequestHandler on port 3000.
• examples/cloudflare-workers/src/index.ts - Cloudflare Worker entry using WorkerEntrypoint; routes all requests to fetchRequestHandler.
• examples/deno-deploy/src/index.ts - Deno Deploy handler registered with Deno.serve; delegates to fetchRequestHandler.
• examples/fastify-server/src/client/index.ts - Demonstrates splitLink with WebSocket subscriptions and HTTP batching against a Fastify server.
• examples/fastify-server/src/server/index.ts - Starts the Fastify server using a shared config object.
• packages/ - The publishable tRPC packages (@trpc/server, @trpc/client, @trpc/react-query, adapter sub-paths).
• examples/ - One runnable app per target runtime/framework showing idiomatic integration patterns.
• scripts/ - Internal tooling for lerna releases and monorepo maintenance.
• www/ - Docusaurus-based documentation website.

Common pitfalls and fixes

• moduleResolution mismatch - tRPC uses sub-path exports (@trpc/server/adapters/fetch); set "moduleResolution": "bundler" or "node16" in tsconfig.json, not "node".
• Missing transformer on both sides - If you pass transformer: superjson to the server router, you must also pass it to every link on the client; omitting it on either side causes silent deserialization failures.
• WebSocket ws package not installed - wsLink requires a global WebSocket. In Node.js <22 you must polyfill: import WebSocket from 'ws'; global.WebSocket = WebSocket as any;.
• createContext not async-safe - createContext can throw; always wrap auth/header parsing in try/catch and throw a TRPCError with code 'UNAUTHORIZED' rather than a plain Error.
• Cloudflare cloudflare:workers not resolved locally - The cloudflare:workers import is only available inside the Cloudflare runtime; for local dev use wrangler dev, not ts-node.
• HTTP batching conflicts with streaming - httpBatchLink collects calls within a microtask tick; if your server uses streaming responses (httpBatchStreamLink), ensure the server adapter supports it and the client uses the matching streaming link variant.

Vibe-coding prompt template

I have a tRPC monorepo block located at `source/` and integration docs at `USAGE.md`.
The upstream package is `@trpc/server` / `@trpc/client` (trpc_trpc).

Please help me integrate tRPC into my existing project step by step:

1. Read `USAGE.md` fully before writing any code.
2. Look at `source/examples/` to understand the pattern for my target runtime
   (tell me which one matches my stack).
3. Create `src/router.ts` with a basic tRPC router exporting `appRouter` and
   `AppRouter` type.
4. Wire the appropriate adapter from `@trpc/server/adapters/<adapter>` into my
   server entry point using the real `fetchRequestHandler` or Express/Fastify
   middleware signature shown in `USAGE.md`.
5. Create a typed client in `src/client.ts` using `createTRPCClient<AppRouter>`
   with the correct links for my use case.
6. If I need subscriptions, add `splitLink` + `wsLink` + `createWSClient` as
   shown in the Fastify scenario in `USAGE.md`.
7. Show me the exact `tsconfig.json` changes needed for sub-path exports.
8. Do not invent any tRPC APIs not shown in `USAGE.md` or the `source/`
   file excerpts.

License and credit

tRPC is released under the MIT License (see source/LICENSE). The upstream project is maintained at github.com/trpc/trpc and documented at trpc.io. npm packages: @trpc/server, @trpc/client.

This product’s unique contribution is clean room implementation of valuable code block into AVCP compatible standard.

전체 설치 가이드와 연동 프롬프트는 구매 후 열람할 수 있습니다.

TypeScript End-to-End Type-Safe API Contract Framework

Automation, Utilities & Developer Tools

무료