MCPInstall

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
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads tanstack-query automatically when relevant.

  3. 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

PriorityCategoryImpactPrefix
1Query Key StructureCRITICALtquery-
2Caching ConfigurationCRITICALcache-
3Mutation PatternsHIGHmutation-
4Prefetching & WaterfallsHIGHprefetch-
5Infinite QueriesMEDIUMinfinite-
6Suspense IntegrationMEDIUMsuspense-
7Error & Retry HandlingMEDIUMerror-
8Render OptimizationLOW-MEDIUMrender-

Quick Reference

1. Query Key Structure (CRITICAL)

  • tquery-key-factories - Use centralized query key factories
  • tquery-hierarchical-keys - Structure keys from generic to specific
  • tquery-always-arrays - Always use array query keys
  • tquery-serializable-objects - Use serializable objects in keys
  • tquery-options-pattern - Use queryOptions for type-safe sharing
  • tquery-colocate-keys - Colocate query keys with features

2. Caching Configuration (CRITICAL)

  • cache-staletime-gctime - Understand staleTime vs gcTime
  • cache-global-defaults - Configure global defaults appropriately
  • cache-placeholder-vs-initial - Use placeholderData vs initialData correctly
  • cache-invalidation-precision - Invalidate with precision
  • cache-refetch-triggers - Control automatic refetch triggers
  • cache-enabled-option - Use enabled for conditional queries

3. Mutation Patterns (HIGH)

  • mutation-optimistic-updates - Implement optimistic updates with rollback
  • mutation-invalidate-onsettled - Invalidate in onSettled, not onSuccess
  • mutation-cancel-queries - Cancel queries before optimistic updates
  • mutation-setquerydata - Use setQueryData for immediate cache updates
  • mutation-avoid-parallel - Avoid parallel mutations on same data

4. Prefetching & Waterfalls (HIGH)

  • prefetch-avoid-waterfalls - Avoid request waterfalls
  • prefetch-on-hover - Prefetch on hover for perceived speed
  • prefetch-in-queryfn - Prefetch dependent data in queryFn
  • prefetch-server-components - Prefetch in Server Components
  • prefetch-flatten-api - Flatten API to reduce waterfalls

5. Infinite Queries (MEDIUM)

  • infinite-max-pages - Limit infinite query pages with maxPages
  • infinite-flatten-pages - Flatten pages for rendering
  • infinite-refetch-behavior - Understand infinite query refetch behavior
  • infinite-loading-states - Handle infinite query loading states correctly

6. Suspense Integration (MEDIUM)

  • suspense-use-suspense-hooks - Use Suspense hooks for simpler loading states
  • suspense-error-boundaries - Always pair Suspense with Error Boundaries
  • suspense-parallel-queries - Combine Suspense queries with useSuspenseQueries
  • suspense-boundaries-placement - Place Suspense boundaries strategically

7. Error & Retry Handling (MEDIUM)

  • error-retry-config - Configure retry with exponential backoff
  • error-conditional-retry - Use conditional retry based on error type
  • error-global-handler - Use global error handler for common errors
  • error-display-patterns - Display errors appropriately
  • error-throw-on-error - Use throwOnError with Error Boundaries

8. Render Optimization (LOW-MEDIUM)

  • render-select-memoize - Memoize select functions
  • render-select-derived - Use select to derive data and reduce re-renders
  • render-notify-props - Use notifyOnChangeProps to limit re-renders
  • render-structural-sharing - Understand structural sharing
  • render-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 orval skill
  • For mocking API responses in tests, see test-msw skill
  • For React 19 data fetching patterns, see react-19 skill

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

View all →

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).

Frontend & Design7.1K installs

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.

Testing & QA6.2K installs

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.

Frontend & Design2.8K installs

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.

Frontend & Design2.3K installs

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

View category →

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.

Testing & QA1.2M installs

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.

Testing & QA996.2K installs

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.

Testing & QA484.1K installs

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.

Testing & QA337.8K installs

test-driven-development

obra/superpowers

Use when implementing any feature or bugfix, before writing implementation code

Testing & QA261.8K installs

Use when implementation is complete, all tests pass, and you need to decide how to integrate the work

Testing & QA216.8K installs