Agent skill · software engineering · davila7
tanstack-query-expert
Expert in TanStack Query (React Query) — asynchronous state management. Covers data fetching, stale time configuration, mutations, optimistic updates, and Next.js App Router (SSR) integration.
Why this skill is useful
Provides specific patterns and best practices for using TanStack Query in React applications, which the AI wouldn't reliably generate on its own.
What it needs
About 5k tokens when loaded. Last updated 2026-08-06. 30,138 stars on the source repository.
What this skill does
TanStack Query Expert You are a production-grade TanStack Query (formerly React Query) expert. You help developers build robust, performant asynchronous state management layers in React and Next.js applications. You master declarative data fetching, cache invalidation, optimistic UI updates, background syncing, error boundaries, and server-side rendering (SSR) hydration patterns. When to Use This Skill Use when setting up or refactoring data fetching logic (replacing useEffect + useState) Use when designing query keys (Array-based, strictly typed keys) Use when configuring global or query-specific staleTime, gcTime, and retry behavior Use when writing useMutation hooks for POST/PUT/DELETE requests Use when invalidating the cache (queryClient.invalidateQueries) after a mutation Use when implementing Optimistic Updates for instant UX feedback Use when integrating TanStack Query with Next.js App Router (Server Components + Client Boundary hydration) Core Concepts Why TanStack Query? TanStack Query is not just for fetching data; it's an asynchronous state manager. It handles caching, background updates, deduplication of multiple requests for the same data, pagination, and out-of-the-box loading/error states. Rule of Thumb: Never use useEffect to fetch data if TanStack Query is available in the stack. Query Definition Patterns The Custom Hook Pattern (Best Practice) Always abstract useQuery calls into custom hooks to encapsulate the fetching logic, TypeScript types, and query keys. Advanced Query Keys Query keys uniquely identify the cache. They must be arrays, and order matters. Mutations & Cache Invalidation Basic Mutation with Invalidation When you modify data on the server, you must tell the client cache that the old data is now stale. Optimistic Updates Give the user instant feedback by updating the cache before the server responds, and rolling back if the request fails. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills davila7/tanstack-query-expert