skills.rest
gohypergiant
gohypergiantOFFICIAL
Explore all skills by this author →
WebsiteGitHub

accelint-tanstack-query-best-practices

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
One-click install
npx skills add https://github.com/gohypergiant/agent-skills --skill accelint-tanstack-query-best-practices
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
cill-i-amcill-i-am

router-core/ssr

Coordinate server-client SSR for TanStack Router across streaming and non-streaming workflows.

Community
Advanced
Ahnd6474Ahnd6474

accelint-tanstack-query-best-practices

Configure TanStack Query to prevent data leakage and performance issues in Next.js App Router applications.

Community
Advanced
hashintelhashintel
7

router-core-ssr

Render React pages with TanStack Router using streaming SSR and head management.

Official
Intermediate
Shreehari-AcharyaShreehari-Acharya

tanstack-query

Manage server-state data with caching, background updates, and optimistic mutations.

Community
Advanced