trpc-patterns

The trpc-patterns skill provides a standardized approach to integrating TRPC with Tanstack Query in TypeScript/React applications. It aims to simplify and structure how backend and frontend components interact, offering best practices for managing API calls, mutations, and data fetching. By following this pattern, developers can ensure more consistent and maintainable code when implementing TRPC with Tanstack Query. This skill eliminates common pitfalls and inconsistencies associated with API communication in TypeScript/React applications.

The skill's primary features include organized backend router structures, where all routes are registered in a main router and feature-specific routers are created for individual services. On the frontend, it provides optimized hooks and query/mutation patterns using Tanstack Query for efficient data fetching and caching. It also emphasizes key principles such as input validation with Zod, handling loading/error states, and ensuring secure and permission-validated operations on the backend. Additionally, the integration encourages invalidating queries after mutations to keep the state in sync and prevent outdated data.

This skill is ideal for developers working with TypeScript, React, and TRPC who are looking for a clean and efficient pattern to manage API calls and data fetching. It is particularly useful for projects where backend and frontend responsibilities are clearly separated, such as in large-scale applications with complex API structures. The patterns provided are well-suited for teams building modern, scalable web applications that prioritize secure, maintainable, and performant code.