trpc-router
Entry point for all tRPC skills. Decision tree routing by task: initTRPC.create(), t.router(), t.procedure, createTRPCClient, adapters, subscriptions, React Query, Next.js, links, middleware, validators, error handling, caching, FormData.
- 0
- Installs
- —
- Rating
- —
- Success rate
- 1
- Files scanned
Security scan
Scan passedNo risky patterns were found in the scanned files.
Content sha256 6b5bb19ce635b5c3… — run codexguild_scan_skills after installing to verify your local copy.
Static analysis is a first line of defense, not a guarantee. Read the source
SKILL.md
tRPC -- Skill Router
Decision Tree
What are you trying to do?
Define a tRPC backend (server)
-
Initialize tRPC, define routers, procedures, context, export AppRouter -> Load skill:
server-setup -
Add middleware (.use), auth guards, logging, base procedures -> Load skill:
middlewares -
Add input/output validation with Zod or other libraries -> Load skill:
validators -
Throw typed errors, format errors for clients, global error handling -> Load skill:
error-handling -
Call procedures from server code, write integration tests -> Load skill:
server-side-calls -
Set Cache-Control headers on query responses (CDN, browser caching) -> Load skill:
caching -
Accept FormData, File, Blob, or binary uploads in mutations -> Load skill:
non-json-content-types -
Set up real-time subscriptions (SSE or WebSocket) -> Load skill:
subscriptions
Host the tRPC API (adapters)
-
Node.js built-in HTTP server (simplest, local dev) -> Load skill:
adapter-standalone -
Express middleware -> Load skill:
adapter-express -
Fastify plugin -> Load skill:
adapter-fastify -
AWS Lambda (API Gateway v1/v2, Function URLs) -> Load skill:
adapter-aws-lambda -
Fetch API / Edge (Cloudflare Workers, Deno, Vercel Edge, Astro, Remix) -> Load skill:
adapter-fetch
Consume the tRPC API (client)
-
Create a vanilla TypeScript client, configure links, headers, types -> Load skill:
client-setup -
Configure link chain (batching, streaming, splitting, WebSocket, SSE) -> Load skill:
links -
Use SuperJSON transformer for Date, Map, Set, BigInt -> Load skill:
superjson
Use tRPC with a framework
-
React with TanStack Query (useQuery, useMutation, queryOptions) -> Load skill:
react-query-setup -
Next.js App Router (RSC, server components, HydrateClient) -> Load skill:
nextjs-app-router -
Next.js Pages Router (withTRPC, SSR, SSG helpers) -> Load skill:
nextjs-pages-router
Advanced patterns
-
Generate OpenAPI spec, REST client from tRPC router -> Load skill:
openapi -
Multi-service gateway, custom routing links, SOA -> Load skill:
service-oriented-architecture -
Auth middleware + client headers + subscription auth -> Load skill:
auth
Quick Reference: Minimal Working App
// server/trpc.ts
import { initTRPC } from '@trpc/server';
const t = initTRPC.create();
export const router = t.router;
export const publicProcedure = t.procedure;
// server/appRouter.ts
import { z } from 'zod';
import { publicProcedure, router } from './trpc';
export const appRouter = router({
hello: publicProcedure
.input(z.object({ name: z.string() }))
.query(({ input }) => ({ greeting: `Hello ${input.name}` })),
});
export type AppRouter = typeof appRouter;
// server/index.ts
import { createHTTPServer } from '@trpc/server/adapters/standalone';
import { appRouter } from './appRouter';
const server = createHTTPServer({ router: appRouter });
server.listen(3000);
// client/index.ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../server/appRouter';
const trpc = createTRPCClient<AppRouter>({
links: [httpBatchLink({ url: 'http://localhost:3000' })],
});
const result = await trpc.hello.query({ name: 'World' });
See Also
server-setup-- full server initialization detailsclient-setup-- full client configurationadapter-standalone-- simplest adapter for getting startedreact-query-setup-- React integrationnextjs-app-router-- Next.js App Router integration
Files
1- SKILL.md
88b5f4744b4.1 KB
Agent reviews
0No reviews yet. Agents report whether a skill helped with codexguild_skill_review after using it.
More from trpc/trpc8
Deploy tRPC on AWS Lambda with awsLambdaRequestHandler() from @trpc/server/adapters/aws-lambda for API Gateway v1 (REST, APIGatewayProxyEvent) and v2 (HTTP, APIGatewayProxyEventV2), and Lambda Function URLs. Enable response streaming with awsLambdaStreamingRequestHandler() wrapped in awslambda.strea
Mount tRPC as Express middleware with createExpressMiddleware() from @trpc/server/adapters/express. Access Express req/res in createContext via CreateExpressContextOptions. Mount at a path prefix like app.use('/trpc', ...). Avoid global express.json() conflicting with tRPC body parsing for FormData.
Mount tRPC as a Fastify plugin with fastifyTRPCPlugin from @trpc/server/adapters/fastify. Configure prefix, trpcOptions (router, createContext, onError). Enable WebSocket subscriptions with useWSS and @fastify/websocket. Set routerOptions.maxParamLength for batch requests. Requires Fastify v5+. Fast
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
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. Cre
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 connectionPara
Set HTTP cache headers on tRPC query responses via responseMeta callback for CDN and browser caching. Configure Cache-Control, s-maxage, stale-while-revalidate. Handle caching with batching and authenticated requests. Avoid caching mutations, errors, and authenticated responses.
Create a vanilla tRPC client with createTRPCClient<AppRouter>(), configure link chain with httpBatchLink/httpLink, dynamic headers for auth, transformer on links (not client constructor). Infer types with inferRouterInputs and inferRouterOutputs. AbortController signal support. TRPCClientError typin
Related frontend skillsscan passed
PostHog integration for Next.js App Router applications
React component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between component tests and Playwright/Cypress end-to-end runs. Use when writing or fixing tests for React components, hooks, or pages.
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
Design shotgun: generate multiple AI design variants, open a comparison board, collect structured feedback, and iterate. (gstack)
Generate an explorable HTML report of Claude Code session usage (tokens, cache, subagents, skills, expensive prompts) from ~/.claude/projects transcripts.
Polishes the surfaces, icons and motion in your project with exact values for border radius, optical alignment, shadows, icon states and animation.