Does this skill support TanStack Query v4?

While the focus is on v5 features like the single-object signature and Suspense hooks, it includes detailed migration patterns to help transition from v4 to v5.

What is the benefit of a Query Key Factory?

It prevents hardcoding strings, reduces bugs caused by key mismatches, and allows for precise cache invalidation across different parts of your application.

How does this improve TypeScript integration?

It utilizes the queryOptions helper and TypeScript inference to ensure your data is typed correctly from the API response through to your components without manual casting.

Does this guide cover server-side rendering (SSR)?

Yes, it provides patterns for first-class Suspense support and data hydration which are essential for frameworks like Next.js and Remix.

TanStack Query v5 Guide

Name: TanStack Query v5 Guide
Author: involvex

byinvolvex

0•

API開発

Implements production-ready TanStack Query v5 patterns for efficient async state management and data fetching in React applications.

This skill provides comprehensive guidance for implementing TanStack Query v5, focusing on modern async state management practices. It bridges the gap between simple data fetching and production-grade architecture by offering patterns for hierarchical query keys, type-safe query options, and optimized data transformations. Whether you are migrating from v4 or starting a new project, this skill ensures your implementation follows the latest standards for caching, background synchronization, and error handling, while leveraging the full power of TypeScript and React Suspense.

主な機能

01Type-safe API configuration using the queryOptions helper for maximum IDE inference

02Advanced data transformation strategies using memoized select functions

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

04Hierarchical Query Key Factory implementation for scalable cache management

05Comprehensive v5 migration patterns including single-object signatures and renamed options

060 GitHub stars

ユースケース

01Designing a scalable feature-based architecture for complex frontend state

02Implementing robust optimistic updates and cache invalidation for real-time UIs

03Migrating legacy React Query implementations to the modern v5 API structure

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add involvex/involvex-claude-marketplace tanstack-query

For use in Claude.ai and ChatGPT

Download Skill