Does it support end-to-end type safety?

Yes, it focuses on the primary benefit of tRPC, which is sharing TypeScript types between your backend procedures and frontend hooks.

What does the tRPC & TanStack Query Patterns skill do?

It provides Claude with domain-specific guidance for implementing type-safe API communication and efficient data fetching using tRPC and TanStack Query.

Which files does this skill apply to?

This skill is specifically designed to work with .tsx files, helping you write cleaner React components with robust data fetching logic.

Can it help with cache invalidation?

Yes, the skill includes patterns for managing TanStack Query's cache, including how to properly invalidate queries after mutations.

tRPC & TanStack Query Patterns

Name: tRPC & TanStack Query Patterns
Author: FranciscoMoretti

byFranciscoMoretti

•

834

API開発

Implements type-safe API communication and data fetching patterns using tRPC and TanStack Query.

概要

This skill provides a standardized set of implementation patterns for integrating tRPC with TanStack Query within Next.js applications. It ensures end-to-end type safety across the full stack while optimizing client-side data fetching, caching, and state management. By applying these patterns to React components, developers can reduce boilerplate code, eliminate runtime API errors, and maintain a consistent architecture for server-client communication in modern web applications.

主な機能

End-to-end type safety for API procedures
Automated cache management and invalidation rules
Optimized TanStack Query hooks integration
Standardized query and mutation patterns
Best practices for data fetching in .tsx files
834 GitHub stars

ユースケース

Managing complex client-side state with TanStack Query
Refactoring REST API calls into type-safe tRPC procedures
Building full-stack TypeScript applications with Next.js

概要

主な機能

End-to-end type safety for API procedures
Automated cache management and invalidation rules
Optimized TanStack Query hooks integration
Standardized query and mutation patterns
Best practices for data fetching in .tsx files
834 GitHub stars

ユースケース

Managing complex client-side state with TanStack Query
Refactoring REST API calls into type-safe tRPC procedures
Building full-stack TypeScript applications with Next.js