accelint-tanstack-query-best-practices

Name: accelint-tanstack-query-best-practices
Availability: InStock
Author: Hypergiant

Configure TanStack Query cache keys, invalidation, and hydration in Next.js App Router apps.

21|4|Updated Jan 15, 2026

Search Tags:#caching #tanstack #react-query #hydration #invalidation #server-components

Ready to run

npx skills add https://github.com/gohypergiant/agent-skills --skill accelint-tanstack-query-best-practices

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: accelint-tanstack-query-best-practices
Source: https://github.com/gohypergiant/agent-skills/tree/main/skills/accelint-tanstack-query-best-practices
Command: npx skills add https://github.com/gohypergiant/agent-skills --skill accelint-tanstack-query-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

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.

Frequently Asked Questions about accelint-tanstack-query-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I structure TanStack Query cache keys to prevent invalidation issues?▼

TanStack Query cache keys should be structured using a centralized key factory system with hierarchical invalidation to keep server and client caches synchronized, preventing data leakage and ensuring reliable UI state.

How do I handle server-side hydration with TanStack Query in Next.js App Router?▼

Server-side hydration with TanStack Query in Next.js App Router uses safe server-client data syncing and streaming support via shouldDehydrateQuery to prevent data leakage and improve UI reliability.

What is the best way to implement optimistic and pessimistic mutations in React Query?▼

Implement React Query mutations using guarded lifecycle callbacks like onMutate, onError, and onSettled to manage both optimistic and pessimistic updates safely while keeping server and client caches in sync.

Why does my TanStack Query observer cause performance issues?▼

TanStack Query observer economics can cause performance issues if queries are not properly encapsulated in custom hooks, which avoids closure bugs and centralizes configuration for better performance tuning.

Does this TanStack Query guidance apply to React apps without Next.js Server Components?▼

This guidance specifically targets React apps using Next.js App Router and Server Components where components fetch data, mutate state, and hydrate on the client, ensuring safe server-client data syncing.