accelint-tanstack-query-best-practices

What problem does it solve?

This skill provides expert patterns and best practices for using TanStack Query in React applications, guiding setup, caching strategies, mutation lifecycles, and server-client hydration to prevent data leakage and improve UI reliability.

Core Features & Use Cases

• Centralized query key factories and hierarchical invalidation to keep server and client caches in sync.
• Comprehensive mutation patterns (pessimistic and optimistic) with lifecycle guidance (onMutate, onError, onSettled).
• Server-side hydration and streaming with Next.js App Router, including streaming support via shouldDehydrateQuery.
• Targeted troubleshooting and pitfall guidance for observer economics, cache invalidation, and performance tuning.

Quick Start

• Read guidance in references/query-client-setup.md, references/server-integration.md, and references/patterns-and-pitfalls.md to configure a robust TanStack Query client.
• Implement a shared keys factory (keys.all, keys.detail) and reuse it across server and client layers for unified invalidation.
• Encapsulate queries in custom hooks (e.g., useTrack, useAllTracks) to avoid closure bugs and to centralize configuration.