skills.rest
leonardoacosta
leonardoacostaCOMMUNITY
Explore all skills by this author →
GitHub

trpc-patterns

Implements tRPC v11 router, typing, and React Query patterns for T3 Turbo monorepos.

Updated Aug 2, 2026
Search Tags:#typescript#api#monorepo#trpc#react-query#type-inference#t3-stack
One-click install
npx skills add https://github.com/leonardoacosta/skills --skill trpc-patterns-leonardoacosta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: trpc-patterns
Source: https://github.com/leonardoacosta/skills/tree/main/t3-stack-kit/skills/trpc-patterns
Command: npx skills add https://github.com/leonardoacosta/skills --skill trpc-patterns-leonardoacosta

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building tRPC APIs in a T3 Turbo monorepo involves non-obvious decisions: how to compose routers, infer types without duplication, structure queries with React Query, and avoid TypeScript serialization limits. This Skill codifies the canonical patterns so routers, procedures, and client integrations stay consistent and type-safe. ## Core Features & Use Cases - Canonical Query Patterns: Enforces queryOptions() / mutationOptions() wrappers instead of direct hooks, with staleTime guidance and batching gotchas. - Type Inference & Middleware: Covers RouterOutputs/RouterInputs inference, auth/logging/rate-limit middleware composition, and semantic TRPCError codes. - Monorepo-Specific Workarounds: Documents the blocked ctx.db pattern, the _shared.ts sub-router split, and the three-site fix for TypeScript serialization limits. - Use Case: When adding a new tenant-scoped CRUD router in packages/api, follow the worked example to import db directly, scope queries by organizationId, and throw NOT_FOUND via TRPCError. ## Quick Start Ask the agent to create a new tRPC router for an entity in packages/api following the trpc-patterns conventions with queryOptions and direct db imports.

Frequently Asked Questions about trpc-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use tRPC queryOptions with React Query?▼

Call api.user.getById.queryOptions({ id }) and pass the result to useQuery or useSuspenseQuery. This returns a plain options object with a stable queryKey, letting you spread overrides like staleTime without losing cache configuration.

How do I infer tRPC procedure types in TypeScript?▼

Use RouterOutputs and RouterInputs exported from your tRPC client to extract return and input types, e.g. RouterOutputs["user"]["getById"]. This avoids duplicating interfaces and keeps client types in sync with the AppRouter.

Can I use tRPC hooks inside React Server Components?▼

No, client-side api.* hooks require the React Query provider, which is client-only. In Server Components, use createCaller with createTRPCContext to run procedures in-process with full type safety and no HTTP round-trip.

Why does ctx.db cause a TypeScript error in T3 monorepos?▼

Placing db on the tRPC context triggers a TypeScript recursion error as router and schema counts grow, often surfacing as RangeError: Maximum call stack size exceeded. The fix is importing db directly in routers and exporting a DrizzleDB type alias.

When should I split a tRPC router into sub-routers?▼

Split when a router cluster exceeds roughly 300 lines or spans multiple sub-domains like CRUD plus scheduling plus reporting. Use the _shared.ts barrel pattern so sub-router files import only from ./_shared while the frontend keeps a flat namespace.

Related Skills

Explore More Software Engineering Skills→
leonardoacostaleonardoacosta

reducing-entropy

Detects and deletes dead code, unused abstractions, and over-engineered patterns across codebases.

Community
Advanced
brandonarbinibrandonarbini

next-server-actions

Implements validated Server Actions, form wiring, and API route patterns for Next.js App Router.

Community
Intermediate
manhthien2005manhthien2005

scaffold-api

Scaffold Next.js App Router API routes with zod validation, NextAuth, and Drizzle ORM.

Community
Advanced
jon23djon23d
3

openapi-codegen

Generate type-safe API clients from OpenAPI specifications using openapi-typescript and openapi-fetch.

Community
Advanced