PlugWiki

tanstack-query skill (tanstack-skills) for Claude Code: a community TanStack Query reference

A community reference that makes Claude write TanStack Query v5 code with the right keys, caching and mutation patterns.

Installs
10.1K
on skills.sh
Stars
36
on GitHub
Updated
Jan 2026
last repo commit

tanstack-query is a single Markdown reference for TanStack Query v5 (formerly React Query). It covers setup, query keys, useQuery and useMutation, optimistic updates, invalidation, infinite and paginated queries, Suspense, prefetching, SSR hydration, testing and TypeScript patterns, ending with 14 best practices and 8 common pitfalls. It is not from the TanStack team: the repo belongs to the tanstack-skills account, and it bundles no scripts.

Good for

  • React developers who use TanStack Query for server state
  • Developers who want Claude to avoid common mistakes such as initialData versus placeholderData
  • Teams adding optimistic updates, infinite lists or SSR hydration

Install tanstack-query

Claude Code

  1. 1

    Copy this prompt.

    Install the tanstack-query skill in Claude Code. Run this command:

/plugin marketplace add tanstack-skills/tanstack-skills
/plugin install tanstack-query@tanstack-skills

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

The README also offers bundles: tanstack-all (13 skills), tanstack-core, tanstack-ui and tanstack-data. Pick one route, not both.

From the project README. Source.

What's in the skill

When it loads

Powerful asynchronous state management, server-state utilities, and data fetching for TS/JS, React, Vue, Solid, Svelte & Angular.

Sections in SKILL.md

  1. Overview
  2. Installation
  3. Setup
  4. Core Concepts
  5. Query Keys
  6. Query Functions
  7. queryOptions Helper
  8. Queries (useQuery)
  9. Basic Usage
  10. Query Options
  11. Mutations (useMutation)
  12. Basic Usage
  13. Mutation State
  14. Optimistic Updates
  15. Optimistic Updates on Lists
  16. Query Invalidation

Key facts

Author
tanstack-skills (owner of the GitHub repo); not the TanStack team
License
MIT (LICENSE file)
Installs on skills.sh
10,089 as of 2026-11-02
GitHub stars
36 for the whole tanstack-skills repo, 2026-11-02
What is inside
1 file: SKILL.md
Part of
The tanstack-query plugin, also inside the tanstack-all (13 skills), tanstack-core and tanstack-data bundles
Covers
TanStack Query v5 with the @tanstack/react-query package
Last repo commit
2026-01-31
Works in
Claude Code, via the plugin marketplace commands in the README

What it includes

  • Install line, QueryClient defaults and provider example

    Shows npm install for @tanstack/react-query and its optional devtools, then a QueryClient with staleTime, gcTime, retry and refetch defaults wrapped in a provider.

    Write · Setup

  • Query keys, query functions and the queryOptions helper

    Explains keys as serializable arrays with prefix invalidation, AbortSignal cancellation in query functions, and reusable queryOptions objects.

    Read · Core concepts

  • useQuery options, useMutation callbacks and state

    Covers freshness, refetch, retry, select and placeholder options, and the onMutate, onSuccess, onError and onSettled lifecycle.

    Try: “Add useQuery for /api/todos with a 1 minute staleTime and an optimistic add-todo mutation.”

    Write · Queries and mutations

  • Cancel, snapshot, update, roll back, then refetch

    A four-step optimistic update pattern for single items and lists, plus prefix, exact and predicate invalidation, refetch, remove and reset.

    Write · Optimistic updates and invalidation

  • Patterns for multi-query screens

    useInfiniteQuery with getNextPageParam and maxPages, useQueries with combine, dependent queries with enabled, and placeholderData for pagination.

    Write · Infinite, parallel, dependent and paginated queries

  • useSuspenseQuery, prefetch on hover or in a loader, hydration

    Includes dehydrate and HydrationBoundary examples for server rendering and streaming.

    Write · Suspense, prefetching, SSR

  • Cache reads and writes, plus test wrappers

    Lists QueryClient methods for get, set, cancel, invalidate and prefetch, and a test setup with retry false and a fresh client per test.

    Write · QueryClient API and testing

  • Typing, focus manager, network mode, persistence

    Typing queryFn results and errors, queryOptions typing, React Native focus handling, network modes, cancellation and a localStorage persister.

    Write · TypeScript patterns and advanced

  • 14 best practices and 8 common pitfalls

    Examples: use queryOptions, structure keys hierarchically, prefer placeholderData over initialData for pagination, and never set staleTime above gcTime.

    Read · Best practices and pitfalls

From the official docs

Permissions

Low risk

Claude writes and edits your app code with this skill, and it shows package install commands. Review the diff and approve installs yourself.

What it can do

  • Read your data
  • Create and change things
  • Delete things
  • Read-only mode

Watch out for

  • It edits your application code

    The skill is a reference that Claude uses while writing data-fetching code. Review diffs, especially optimistic updates and cache invalidation, which change what users see. github.com

  • It shows package install commands

    SKILL.md's Installation section lists npm install @tanstack/react-query and npm install -D @tanstack/react-query-devtools. Approve package installs yourself. github.com

  • Not published by the TanStack team

    The repo is owned by the tanstack-skills account and the README does not say it is affiliated with TanStack. Check the content against the official TanStack Query docs for your version. github.com

Technical details
Turning on read-onlyNo read-only mode. Claude writes code with it.
Sign-in and keysSKILL.md names no account or API key.
Data retentionSKILL.md names no logging or telemetry.
Scopes

  • Claude writes React and TypeScript code in your project

  • SKILL.md shows npm install lines for @tanstack/react-query and its devtools

Questions

What does the tanstack-query skill do?

It gives Claude a TanStack Query v5 reference to draw on while writing React data-fetching code: query keys, mutations, optimistic updates, invalidation, SSR hydration, testing and TypeScript typing.

How do I install tanstack-query?

Use the install box at the top of this page. The plugin route installs only the tanstack-query plugin. The README also offers bundles such as tanstack-all.

Is it made by the TanStack team?

Nothing in the README says so. The repo belongs to the tanstack-skills account and its LICENSE names tanstack-skills as the copyright holder. It is a separate project from TanStack Query itself.

Does it cover Vue, Solid, Svelte or Angular?

The description names TS/JS, React, Vue, Solid, Svelte and Angular, but the body targets @tanstack/react-query and its examples use React hooks.

Which version does it cover?

SKILL.md says current version v5. It calls out v5 details such as initialPageParam being required for infinite queries.

Is tanstack-query safe to install?

The skill folder is one Markdown file and bundles no scripts. It shows npm install commands and Claude will edit your code with it, so review diffs and approve package installs yourself.

How many skills are in the tanstack-all bundle?

The README says tanstack-all holds 13 skills, and the repo's tanstack-all folder holds 13. The marketplace description for tanstack-all also names Ranger, which has its own tanstack-ranger plugin.

Information

updated Nov 2, 2026

Repository
tanstack-skills/tanstack-skills
Folder
plugins/tanstack-query/skills/tanstack-query

tanstack-skills/tanstack-skillsskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5
  1. README · github.com
  2. tanstack-query on skills.sh · skills.sh
  3. tanstack-query SKILL.md · github.com
  4. LICENSE · github.com
  5. marketplace.json · github.com

Updated Nov 2, 2026.