@trpc/server 11.14.0 → 11.14.1

package/skills/adapter-fetch/SKILL.md

@@ -0,0 +1,177 @@
+---
+name: adapter-fetch
+description: >
+  Deploy tRPC on WinterCG-compliant edge runtimes with fetchRequestHandler() from
+  @trpc/server/adapters/fetch. Supports Cloudflare Workers, Deno Deploy, Vercel
+  Edge Runtime, Astro, Remix, SolidStart. FetchCreateContextFnOptions provides
+  req (Request) and resHeaders (Headers) for context creation. The endpoint option
+  must match the URL path prefix where the handler is mounted.
+type: core
+library: trpc
+library_version: '11.14.0'
+requires:
+  - server-setup
+sources:
+  - www/docs/server/adapters/fetch.mdx
+  - examples/cloudflare-workers/
+  - examples/deno-deploy/
+---
+
+# tRPC — Adapter: Fetch / Edge Runtimes
+
+## Setup
+
+```ts
+// Cloudflare Worker example
+import { initTRPC } from '@trpc/server';
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
+import type { FetchCreateContextFnOptions } from '@trpc/server/adapters/fetch';
+import { z } from 'zod';
+
+function createContext({ req, resHeaders }: FetchCreateContextFnOptions) {
+  const user = req.headers.get('authorization');
+  return { user, resHeaders };
+}
+type Context = Awaited<ReturnType<typeof createContext>>;
+
+const t = initTRPC.context<Context>().create();
+
+const appRouter = t.router({
+  greet: t.procedure
+    .input(z.object({ name: z.string() }))
+    .query(({ input }) => ({ greeting: `Hello, ${input.name}!` })),
+});
+
+export type AppRouter = typeof appRouter;
+
+export default {
+  async fetch(request: Request): Promise<Response> {
+    return fetchRequestHandler({
+      endpoint: '/trpc',
+      req: request,
+      router: appRouter,
+      createContext,
+    });
+  },
+};
+```
+
+## Core Patterns
+
+### Cloudflare Workers
+
+```ts
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
+import { createContext } from './context';
+import { appRouter } from './router';
+
+export default {
+  async fetch(request: Request): Promise<Response> {
+    return fetchRequestHandler({
+      endpoint: '/trpc',
+      req: request,
+      router: appRouter,
+      createContext,
+    });
+  },
+};
+```
+
+### Astro SSR
+
+```ts
+// src/pages/trpc/[trpc].ts
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
+import type { APIRoute } from 'astro';
+import { createContext } from '../../server/context';
+import { appRouter } from '../../server/router';
+
+export const ALL: APIRoute = (opts) => {
+  return fetchRequestHandler({
+    endpoint: '/trpc',
+    req: opts.request,
+    router: appRouter,
+    createContext,
+  });
+};
+```
+
+### Remix
+
+```ts
+// app/routes/trpc.$trpc.ts
+import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node';
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
+import { createContext } from '~/server/context';
+import { appRouter } from '~/server/router';
+
+function handleRequest(args: LoaderFunctionArgs | ActionFunctionArgs) {
+  return fetchRequestHandler({
+    endpoint: '/trpc',
+    req: args.request,
+    router: appRouter,
+    createContext,
+  });
+}
+
+export const loader = async (args: LoaderFunctionArgs) => handleRequest(args);
+export const action = async (args: ActionFunctionArgs) => handleRequest(args);
+```
+
+### Deno Deploy
+
+```ts
+import { fetchRequestHandler } from 'npm:@trpc/server/adapters/fetch';
+import { createContext } from './context.ts';
+import { appRouter } from './router.ts';
+
+Deno.serve((request) => {
+  return fetchRequestHandler({
+    endpoint: '/trpc',
+    req: request,
+    router: appRouter,
+    createContext,
+  });
+});
+```
+
+## Common Mistakes
+
+### HIGH Mismatched endpoint path in fetchRequestHandler
+
+Wrong:
+
+```ts
+// Handler mounted at /api/trpc/[trpc] but endpoint says /trpc
+fetchRequestHandler({
+  endpoint: '/trpc',
+  req: request,
+  router: appRouter,
+  createContext,
+});
+```
+
+Correct:
+
+```ts
+// endpoint must match the actual URL path prefix
+fetchRequestHandler({
+  endpoint: '/api/trpc',
+  req: request,
+  router: appRouter,
+  createContext,
+});
+```
+
+The `endpoint` option tells tRPC where to strip the URL prefix to extract the procedure name. If it does not match the actual mount path, all procedures return 404 because the path parsing extracts the wrong procedure name.
+
+Source: www/docs/server/adapters/fetch.mdx
+
+## See Also
+
+- **server-setup** -- `initTRPC.create()`, router/procedure definition, context
+- **adapter-standalone** -- alternative for Node.js HTTP server
+- **adapter-express** -- alternative when Express middleware ecosystem is needed
+- **adapter-aws-lambda** -- alternative for AWS Lambda deployments
+- Cloudflare Workers docs: https://developers.cloudflare.com/workers/
+- Deno Deploy docs: https://deno.com/deploy/docs

package/skills/adapter-standalone/SKILL.md

@@ -0,0 +1,184 @@
+---
+name: adapter-standalone
+description: >
+  Mount tRPC on Node.js built-in HTTP server with createHTTPServer() from
+  @trpc/server/adapters/standalone, createHTTPHandler() for custom http.createServer,
+  createHTTP2Handler() for HTTP/2 with TLS. Configure basePath to slice URL prefix,
+  CORS via the cors npm package passed as middleware option. CreateHTTPContextOptions
+  provides req and res for context creation.
+type: core
+library: trpc
+library_version: '11.14.0'
+requires:
+  - server-setup
+sources:
+  - www/docs/server/adapters/standalone.md
+  - examples/standalone-server/src/server.ts
+---
+
+# tRPC — Adapter: Standalone
+
+## Setup
+
+```ts
+// server.ts
+import { initTRPC } from '@trpc/server';
+import { createHTTPServer } from '@trpc/server/adapters/standalone';
+import { z } from 'zod';
+
+const t = initTRPC.create();
+
+const appRouter = t.router({
+  greet: t.procedure
+    .input(z.object({ name: z.string() }))
+    .query(({ input }) => ({ greeting: `Hello, ${input.name}!` })),
+});
+
+export type AppRouter = typeof appRouter;
+
+createHTTPServer({
+  router: appRouter,
+  createContext() {
+    return {};
+  },
+}).listen(3000);
+
+console.log('Listening on http://localhost:3000');
+```
+
+## Core Patterns
+
+### CORS with the cors package
+
+```ts
+import { createHTTPServer } from '@trpc/server/adapters/standalone';
+import cors from 'cors';
+import { createContext } from './context';
+import { appRouter } from './router';
+
+createHTTPServer({
+  middleware: cors({ origin: 'http://localhost:5173' }),
+  router: appRouter,
+  createContext,
+}).listen(3000);
+```
+
+Install CORS support: `npm install cors @types/cors`
+
+### Custom HTTP server with createHTTPHandler
+
+```ts
+import { createServer } from 'http';
+import { createHTTPHandler } from '@trpc/server/adapters/standalone';
+import { appRouter } from './router';
+
+const handler = createHTTPHandler({
+  router: appRouter,
+  createContext() {
+    return {};
+  },
+});
+
+createServer((req, res) => {
+  if (req.url?.startsWith('/health')) {
+    res.writeHead(200);
+    res.end('OK');
+    return;
+  }
+  handler(req, res);
+}).listen(3000);
+```
+
+### basePath for URL prefix stripping
+
+```ts
+import { createServer } from 'http';
+import { createHTTPHandler } from '@trpc/server/adapters/standalone';
+import { appRouter } from './router';
+
+const handler = createHTTPHandler({
+  router: appRouter,
+  basePath: '/trpc/',
+});
+
+createServer((req, res) => {
+  if (req.url?.startsWith('/trpc/')) {
+    return handler(req, res);
+  }
+  res.statusCode = 404;
+  res.end('Not Found');
+}).listen(3000);
+```
+
+The `basePath` option strips the prefix before routing, so `/trpc/greet` resolves to the `greet` procedure.
+
+### HTTP/2 with createHTTP2Handler
+
+```ts
+import http2 from 'http2';
+import { readFileSync } from 'node:fs';
+import { createHTTP2Handler } from '@trpc/server/adapters/standalone';
+import type { CreateHTTP2ContextOptions } from '@trpc/server/adapters/standalone';
+import { appRouter } from './router';
+
+const tlsKey = readFileSync('./certs/server.key');
+const tlsCert = readFileSync('./certs/server.crt');
+
+async function createContext(opts: CreateHTTP2ContextOptions) {
+  return {};
+}
+
+const handler = createHTTP2Handler({
+  router: appRouter,
+  createContext,
+});
+
+const server = http2.createSecureServer(
+  { key: tlsKey, cert: tlsCert },
+  (req, res) => {
+    handler(req, res);
+  },
+);
+
+server.listen(3001);
+```
+
+## Common Mistakes
+
+### HIGH No CORS configuration for cross-origin requests
+
+Wrong:
+
+```ts
+createHTTPServer({
+  router: appRouter,
+  createContext() {
+    return {};
+  },
+}).listen(3000);
+```
+
+Correct:
+
+```ts
+import cors from 'cors';
+
+createHTTPServer({
+  middleware: cors({ origin: 'http://localhost:5173' }),
+  router: appRouter,
+  createContext() {
+    return {};
+  },
+}).listen(3000);
+```
+
+The standalone adapter has no CORS handling by default. Cross-origin browser requests fail silently because preflight OPTIONS requests receive no CORS headers.
+
+Source: www/docs/server/adapters/standalone.md
+
+## See Also
+
+- **server-setup** -- `initTRPC.create()`, router/procedure definition, context
+- **adapter-express** -- alternative adapter when you need Express middleware ecosystem
+- **adapter-fetch** -- alternative adapter for edge/serverless runtimes
+- **subscriptions** -- adding real-time subscriptions to a standalone server

package/skills/auth/SKILL.md

@@ -0,0 +1,342 @@
+---
+name: auth
+description: >
+  Implement JWT/cookie authentication and authorization in tRPC using createContext
+  for user extraction, t.middleware with opts.next({ ctx }) for context narrowing to
+  non-null user, protectedProcedure base pattern, client-side Authorization headers
+  via httpBatchLink headers(), WebSocket connectionParams, and SSE auth via cookies
+  or EventSource polyfill custom headers.
+type: composition
+library: trpc
+library_version: '11.14.0'
+requires:
+  - server-setup
+  - middlewares
+  - client-setup
+sources:
+  - www/docs/server/authorization.md
+  - www/docs/client/headers.md
+  - www/docs/client/links/httpSubscriptionLink.md
+  - www/docs/server/websockets.md
+---
+
+# tRPC — Auth
+
+## Setup
+
+```ts
+// server/trpc.ts
+import { initTRPC, TRPCError } from '@trpc/server';
+import type { CreateHTTPContextOptions } from '@trpc/server/adapters/standalone';
+
+export async function createContext({ req }: CreateHTTPContextOptions) {
+  async function getUserFromHeader() {
+    const token = req.headers.authorization?.split(' ')[1];
+    if (token) {
+      const user = await verifyJwt(token); // your JWT verification
+      return user; // e.g. { id: string; name: string; role: string }
+    }
+    return null;
+  }
+  return { user: await getUserFromHeader() };
+}
+
+export type Context = Awaited<ReturnType<typeof createContext>>;
+
+const t = initTRPC.context<Context>().create();
+
+export const publicProcedure = t.procedure;
+
+export const protectedProcedure = t.procedure.use(
+  async function isAuthed(opts) {
+    const { ctx } = opts;
+    if (!ctx.user) {
+      throw new TRPCError({ code: 'UNAUTHORIZED' });
+    }
+    return opts.next({
+      ctx: {
+        user: ctx.user, // narrows user to non-null
+      },
+    });
+  },
+);
+
+export const router = t.router;
+```
+
+```ts
+// client/trpc.ts
+import { createTRPCClient, httpBatchLink } from '@trpc/client';
+import type { AppRouter } from '../server/router';
+
+let token = '';
+export function setToken(t: string) {
+  token = t;
+}
+
+export const trpc = createTRPCClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: 'http://localhost:3000/trpc',
+      headers() {
+        return { Authorization: `Bearer ${token}` };
+      },
+    }),
+  ],
+});
+```
+
+## Core Patterns
+
+### Context narrowing with auth middleware
+
+```ts
+import { initTRPC, TRPCError } from '@trpc/server';
+
+type Context = { user: { id: string; role: string } | null };
+const t = initTRPC.context<Context>().create();
+
+const isAuthed = t.middleware(async ({ ctx, next }) => {
+  if (!ctx.user) {
+    throw new TRPCError({ code: 'UNAUTHORIZED' });
+  }
+  return next({ ctx: { user: ctx.user } });
+});
+
+const isAdmin = t.middleware(async ({ ctx, next }) => {
+  if (!ctx.user || ctx.user.role !== 'admin') {
+    throw new TRPCError({ code: 'FORBIDDEN' });
+  }
+  return next({ ctx: { user: ctx.user } });
+});
+
+export const protectedProcedure = t.procedure.use(isAuthed);
+export const adminProcedure = t.procedure.use(isAdmin);
+```
+
+### SSE subscription auth with EventSource polyfill
+
+```ts
+import {
+  createTRPCClient,
+  httpBatchLink,
+  httpSubscriptionLink,
+  splitLink,
+} from '@trpc/client';
+import { EventSourcePolyfill } from 'event-source-polyfill';
+import type { AppRouter } from '../server/router';
+
+const trpc = createTRPCClient<AppRouter>({
+  links: [
+    splitLink({
+      condition: (op) => op.type === 'subscription',
+      true: httpSubscriptionLink({
+        url: 'http://localhost:3000/trpc',
+        EventSource: EventSourcePolyfill,
+        eventSourceOptions: async () => {
+          return {
+            headers: {
+              authorization: `Bearer ${getToken()}`,
+            },
+          };
+        },
+      }),
+      false: httpBatchLink({
+        url: 'http://localhost:3000/trpc',
+        headers() {
+          return { Authorization: `Bearer ${getToken()}` };
+        },
+      }),
+    }),
+  ],
+});
+```
+
+### WebSocket auth with connectionParams
+
+```ts
+// server/context.ts
+import type { CreateWSSContextFnOptions } from '@trpc/server/adapters/ws';
+
+export const createContext = async (opts: CreateWSSContextFnOptions) => {
+  const token = opts.info.connectionParams?.token;
+  const user = token ? await verifyJwt(token) : null;
+  return { user };
+};
+```
+
+```ts
+// client/trpc.ts
+import { createTRPCClient, createWSClient, wsLink } from '@trpc/client';
+import type { AppRouter } from '../server/router';
+
+const wsClient = createWSClient({
+  url: 'ws://localhost:3001',
+  connectionParams: async () => ({
+    token: getToken(),
+  }),
+});
+
+const trpc = createTRPCClient<AppRouter>({
+  links: [wsLink({ client: wsClient })],
+});
+```
+
+### SSE auth with cookies (same domain)
+
+```ts
+import {
+  createTRPCClient,
+  httpBatchLink,
+  httpSubscriptionLink,
+  splitLink,
+} from '@trpc/client';
+import type { AppRouter } from '../server/router';
+
+const trpc = createTRPCClient<AppRouter>({
+  links: [
+    splitLink({
+      condition: (op) => op.type === 'subscription',
+      true: httpSubscriptionLink({
+        url: '/api/trpc',
+        eventSourceOptions() {
+          return { withCredentials: true };
+        },
+      }),
+      false: httpBatchLink({ url: '/api/trpc' }),
+    }),
+  ],
+});
+```
+
+## Common Mistakes
+
+### HIGH Not narrowing user type in auth middleware
+
+Wrong:
+
+```ts
+const authMiddleware = t.middleware(async ({ ctx, next }) => {
+  if (!ctx.user) throw new TRPCError({ code: 'UNAUTHORIZED' });
+  return next(); // user still nullable downstream
+});
+```
+
+Correct:
+
+```ts
+const authMiddleware = t.middleware(async ({ ctx, next }) => {
+  if (!ctx.user) throw new TRPCError({ code: 'UNAUTHORIZED' });
+  return next({ ctx: { user: ctx.user } }); // narrows to non-null
+});
+```
+
+Without `opts.next({ ctx })`, downstream procedures still see `user` as `{ id: string } | null`, requiring redundant null checks.
+
+Source: www/docs/server/authorization.md
+
+### HIGH SSE auth via URL query params exposes tokens
+
+Wrong:
+
+```ts
+httpSubscriptionLink({
+  url: 'http://localhost:3000/trpc',
+  connectionParams: async () => ({
+    token: 'my-secret-jwt',
+  }),
+});
+```
+
+Correct:
+
+```ts
+import { EventSourcePolyfill } from 'event-source-polyfill';
+
+httpSubscriptionLink({
+  url: 'http://localhost:3000/trpc',
+  EventSource: EventSourcePolyfill,
+  eventSourceOptions: async () => ({
+    headers: { authorization: 'Bearer my-secret-jwt' },
+  }),
+});
+```
+
+`connectionParams` are serialized as URL query strings for SSE, exposing tokens in server logs and browser history. Use cookies for same-domain or custom headers via an EventSource polyfill instead.
+
+Source: www/docs/client/links/httpSubscriptionLink.md
+
+### MEDIUM Async headers causing stuck isFetching
+
+Wrong:
+
+```ts
+httpBatchLink({
+  url: '/api/trpc',
+  async headers() {
+    const token = await refreshToken(); // can race
+    return { Authorization: `Bearer ${token}` };
+  },
+});
+```
+
+Correct:
+
+```ts
+let cachedToken: string | null = null;
+
+async function ensureToken() {
+  if (!cachedToken) cachedToken = await refreshToken();
+  return cachedToken;
+}
+
+httpBatchLink({
+  url: '/api/trpc',
+  async headers() {
+    return { Authorization: `Bearer ${await ensureToken()}` };
+  },
+});
+```
+
+When the headers function is async (e.g., refreshing auth tokens), React Query's `isFetching` can get stuck permanently in certain race conditions.
+
+Source: https://github.com/trpc/trpc/issues/7001
+
+### HIGH Skipping auth or opening CORS too wide in prototypes
+
+Wrong:
+
+```ts
+import cors from 'cors';
+
+createHTTPServer({
+  middleware: cors(), // origin: '*' by default
+  router: appRouter,
+  createContext() {
+    return {};
+  }, // no auth
+}).listen(3000);
+```
+
+Correct:
+
+```ts
+import cors from 'cors';
+
+createHTTPServer({
+  middleware: cors({ origin: 'https://myapp.com' }),
+  router: appRouter,
+  createContext,
+}).listen(3000);
+```
+
+Wildcard CORS and missing auth middleware are acceptable only during local development. Always restrict CORS origins and add auth before deploying.
+
+Source: maintainer interview
+
+## See Also
+
+- **middlewares** -- context narrowing, `.use()`, `.concat()`, base procedure patterns
+- **subscriptions** -- SSE and WebSocket transport setup for authenticated subscriptions
+- **client-setup** -- `createTRPCClient`, link chain, `headers` option
+- **links** -- `splitLink`, `httpSubscriptionLink`, `wsLink` configuration