trpc

Create end-to-end type-safe APIs with tRPC, Zod validation, and nested routers.

1|Updated Sep 26, 2025
One-click install
npx skills add https://github.com/pascallammers/mylo-travel-concierge-v2 --skill trpc-pascallammers
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: trpc
Source: https://github.com/pascallammers/mylo-travel-concierge-v2/tree/main/.factory/skills/trpc
Command: npx skills add https://github.com/pascallammers/mylo-travel-concierge-v2 --skill trpc-pascallammers

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @trpc/server, @trpc/client, @trpc/react-query, @tanstack/react-query, zod, superjson, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines API development by providing end-to-end type safety between your server and client, eliminating the need for manual type definitions and reducing runtime errors.

Core Features & Use Cases

  • Type-Safe Procedures: Define queries and mutations with strong input and output validation using Zod.
  • Router Organization: Structure your API logically with nested routers for better maintainability.
  • Middleware Integration: Implement authentication, authorization, logging, and rate limiting using reusable middleware.
  • React Query Integration: Seamlessly integrate with TanStack Query for efficient data fetching and state management on the client.
  • Use Case: Build a full-stack application where your Next.js frontend can call server-side functions with confidence, knowing that TypeScript will catch any type mismatches before runtime.

Quick Start

Use the trpc skill to create a new user with the provided email and name.

Frequently Asked Questions about trpc

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

FAQPage Schema
How do I create end-to-end type-safe APIs between my server and React client?

End-to-end type-safe APIs are created by defining server-side tRPC procedures with Zod validation and connecting them to a React Query client. This ensures input and output types are automatically inferred across the full stack without manual type definitions.

How does Zod input validation work with tRPC procedures?

Zod validates tRPC procedure inputs by parsing incoming data against a defined schema before execution. If validation fails, the request is rejected safely; if it passes, TypeScript infers the exact validated input shape for subsequent server logic.

Can I use TanStack React Query for data fetching with tRPC?

TanStack React Query integrates with tRPC via the @trpc/react-query package. This combination allows you to use tRPC procedures as React Query hooks, providing efficient client-side data fetching, caching, and state management with full type safety.

What is the best way to structure a large tRPC API with authentication middleware?

Large tRPC APIs are structured using nested routers to organize related procedures logically. Authentication and authorization are handled by applying reusable custom middleware to these routers, ensuring secure access control before queries or mutations execute.

Do I need superjson to maintain type safety when sending complex data over tRPC?

Superjson is required to maintain type safety when transmitting complex data types like Date objects over tRPC. It acts as a serialization layer that preserves rich JavaScript types during client-server communication, preventing runtime parsing errors.