
tanstack-query
TanStack Query v5 performance optimization for data fetching, caching, mutations, and query patterns. This skill should be used when using useQuery, useMutation, queryClient, prefetch patterns, or TanStack Query caching. This skill does NOT cover generating query hooks from OpenAPI (use orval skill) or mocking API responses in tests (use test-msw skill).
- Installs
- 629
- Last 24h
- +24
- Trending rank
- #5035
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/pproenca/dot-skills --skill tanstack-query- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads tanstack-query automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
TanStack Query Best Practices
Comprehensive performance optimization guide for TanStack Query v5 applications. Contains 40 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
When to Apply
Reference these guidelines when:
- Writing new queries, mutations, or data fetching logic
- Implementing caching strategies (staleTime, gcTime)
- Reviewing code for performance issues or request waterfalls
- Refactoring existing TanStack Query code
- Implementing infinite queries, Suspense, or optimistic updates
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Query Key Structure | CRITICAL | tquery- |
| 2 | Caching Configuration | CRITICAL | cache- |
| 3 | Mutation Patterns | HIGH | mutation- |
| 4 | Prefetching & Waterfalls | HIGH | prefetch- |
| 5 | Infinite Queries | MEDIUM | infinite- |
| 6 | Suspense Integration | MEDIUM | suspense- |
| 7 | Error & Retry Handling | MEDIUM | error- |
| 8 | Render Optimization | LOW-MEDIUM | render- |
Quick Reference
1. Query Key Structure (CRITICAL)
tquery-key-factories- Use centralized query key factoriestquery-hierarchical-keys- Structure keys from generic to specifictquery-always-arrays- Always use array query keystquery-serializable-objects- Use serializable objects in keystquery-options-pattern- Use queryOptions for type-safe sharingtquery-colocate-keys- Colocate query keys with features
2. Caching Configuration (CRITICAL)
cache-staletime-gctime- Understand staleTime vs gcTimecache-global-defaults- Configure global defaults appropriatelycache-placeholder-vs-initial- Use placeholderData vs initialData correctlycache-invalidation-precision- Invalidate with precisioncache-refetch-triggers- Control automatic refetch triggerscache-enabled-option- Use enabled for conditional queries
3. Mutation Patterns (HIGH)
mutation-optimistic-updates- Implement optimistic updates with rollbackmutation-invalidate-onsettled- Invalidate in onSettled, not onSuccessmutation-cancel-queries- Cancel queries before optimistic updatesmutation-setquerydata- Use setQueryData for immediate cache updatesmutation-avoid-parallel- Avoid parallel mutations on same data
4. Prefetching & Waterfalls (HIGH)
prefetch-avoid-waterfalls- Avoid request waterfallsprefetch-on-hover- Prefetch on hover for perceived speedprefetch-in-queryfn- Prefetch dependent data in queryFnprefetch-server-components- Prefetch in Server Componentsprefetch-flatten-api- Flatten API to reduce waterfalls
5. Infinite Queries (MEDIUM)
infinite-max-pages- Limit infinite query pages with maxPagesinfinite-flatten-pages- Flatten pages for renderinginfinite-refetch-behavior- Understand infinite query refetch behaviorinfinite-loading-states- Handle infinite query loading states correctly
6. Suspense Integration (MEDIUM)
suspense-use-suspense-hooks- Use Suspense hooks for simpler loading statessuspense-error-boundaries- Always pair Suspense with Error Boundariessuspense-parallel-queries- Combine Suspense queries with useSuspenseQueriessuspense-boundaries-placement- Place Suspense boundaries strategically
7. Error & Retry Handling (MEDIUM)
error-retry-config- Configure retry with exponential backofferror-conditional-retry- Use conditional retry based on error typeerror-global-handler- Use global error handler for common errorserror-display-patterns- Display errors appropriatelyerror-throw-on-error- Use throwOnError with Error Boundaries
8. Render Optimization (LOW-MEDIUM)
render-select-memoize- Memoize select functionsrender-select-derived- Use select to derive data and reduce re-rendersrender-notify-props- Use notifyOnChangeProps to limit re-rendersrender-structural-sharing- Understand structural sharingrender-tracked-props- Avoid destructuring all properties
How to Use
Read individual reference files for detailed explanations and code examples:
- Section definitions - Category structure and impact levels
- Reference files:
references/{prefix}-{slug}.md
Each reference file contains:
- Brief explanation of why it matters
- Incorrect code example with explanation
- Correct code example with explanation
- Additional context and references
Related Skills
- For generating type-safe query hooks, see
orvalskill - For mocking API responses in tests, see
test-mswskill - For React 19 data fetching patterns, see
react-19skill
Full Compiled Document
For the complete guide with all rules expanded: AGENTS.md
FAQ
What does the tanstack-query skill do?
TanStack Query v5 performance optimization for data fetching, caching, mutations, and query patterns. This skill should be used when using useQuery, useMutation, queryClient, prefetch patterns, or TanStack Query caching. This skill does NOT cover generating query hooks from OpenAPI (use orval skill) or mocking API responses in tests (use test-msw skill).
How do I install tanstack-query?
Run npx skills add https://github.com/pproenca/dot-skills --skill tanstack-query in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/tanstack-query/ (personal) or .claude/skills/tanstack-query/ (project).
Which AI agents can use tanstack-query?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is tanstack-query safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains tanstack-query?
It is published by pproenca in pproenca/dot-skills. It has 629 recorded installs.
More from pproenca/dot-skills
zod
pproenca/dot-skills
Zod schema validation best practices for type safety, parsing, and error handling. This skill should be used when defining z.object schemas, using z.string validations, safeParse, or z.infer. This skill does NOT cover React Hook Form integration patterns (use react-hook-form skill) or OpenAPI client generation (use orval skill).
vitest
pproenca/dot-skills
Vitest testing framework patterns for test setup, async testing, mocking with vi., snapshots, and test performance (formerly test-vitest). This skill should be used when writing or debugging Vitest tests. This skill does NOT cover TDD methodology (use test-tdd skill), API mocking with MSW (use test-msw skill), or Jest-specific APIs.
react-hook-form
pproenca/dot-skills
React Hook Form performance optimization for client-side form validation using useForm, useWatch, useController, useFieldArray, the subscribe() API, and the Watch / FormStateSubscribe / FieldArray render-prop components. Covers RHF 7.82 additions including resetDefaultValues() and the disabled field-array option. This skill should be used when building client-side controlled forms with React Hook Form library. This skill does NOT cover React 19 Server Actions, useActionState, or server-side form handling (use react-19 skill for those).
emilkowal-animations
pproenca/dot-skills
Emil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, drawers, or motion.
nuqs
pproenca/dot-skills
nuqs (type-safe URL query state) best practices for Next.js and other React frameworks. This skill should be used when writing, reviewing, or refactoring code that uses nuqs for URL state management. Triggers on tasks involving useQueryState, useQueryStates, search params, URL state, query parameters, nuqs parsers, limitUrlUpdates, Standard Schema, NuqsAdapter, or Next.js routing with state.
clean-architecture
pproenca/dot-skills
Clean Architecture principles and best practices from Robert C. Martin's book. This skill should be used when designing software systems, reviewing code structure, or refactoring applications to achieve better separation of concerns. Triggers on tasks involving layers, boundaries, dependency direction, entities, use cases, or system architecture.
Popular testing & qa skills
tdd
mattpocock/skills
Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.
grilling
mattpocock/skills
Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.
migrate-to-shoehorn
mattpocock/skills
Migrate test files from as type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace as in tests, or needs partial test data.
run-train
lllllllama/rigorpilot-skills
Rigor Train skill for deep learning research repositories. Use when a documented or selected training command should be run conservatively for startup verification, short-run verification, full kickoff, or resume, with command, config, seed, log, checkpoint, status, and metric evidence written to standardized trainoutputs/. Do not use for environment setup, exploratory sweeps, speculative idea implementation, or end-to-end orchestration.
test-driven-development
obra/superpowers
Use when implementing any feature or bugfix, before writing implementation code
finishing-a-development-branch
obra/superpowers
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work