How does it handle TypeScript integration?

It promotes the use of the Query Options API and TypeScript inference for maximum type safety across imperative and declarative methods.

Can it help with cache invalidation?

Absolutely. It implements hierarchical query key factories to make cache invalidation and synchronization predictable and efficient.

Does this skill support the latest TanStack Query v5 features?

Yes, it is specifically designed for version 5, covering the single object signature, renamed options, and first-class Suspense support.

Does it include patterns for optimistic updates?

Yes, it provides detailed patterns for mutations that include manual cache updates to provide instant user feedback during network requests.

TanStack Query v5 Patterns

Name: TanStack Query v5 Patterns
Author: tianzecn

bytianzecn

•

API Development

Implements production-ready TanStack Query v5 patterns for efficient server state management and type-safe data fetching.

This skill provides a comprehensive implementation framework for TanStack Query v5, focusing on modern async state management patterns. It guides users through the transition from v4 to v5, including the single object signature, hierarchical query key factories, and first-class Suspense integration. By leveraging these patterns, developers can ensure type-safe data fetching, optimized cache invalidation, and robust error handling while avoiding common anti-patterns in React applications.

Key Features

01Advanced mutation patterns with support for optimistic updates and invalidation

02Type-safe data transformation using the Query Options API and select pattern

03Multi-layer error handling strategies covering component, global, and boundary levels

04Hierarchical Query Key Factory implementation for structured cache management

05Comprehensive v5 migration patterns including single object signature and renamed options

061 GitHub stars

Use Cases

01Implementing high-performance UI updates using optimistic state transitions and Suspense

02Establishing a feature-based colocation architecture for scalable data fetching logic

03Migrating React applications from React Query v4 to TanStack Query v5 with codemod support

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tianzecn/myclaudecode tanstack-query

For use in Claude.ai and ChatGPT

Download Skill