# tanstack-query-expert

This skill guides TanStack Query work in React and Next.js, from query design and cache handling to mutations and server-side hydration. Use it when building or revising data-fetching flows.

- skill · `type=skill` · Claude Code · 196 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/web-development/tanstack-query-expert
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/tanstack-query-expert

## What it does

The skill covers putting queries in custom hooks, choosing cache keys, and configuring data freshness and retry behavior. It also addresses server mutations, cache invalidation, and optimistic changes that can be rolled back when a request fails.

For the Next.js App Router, it shows server-fetched data passed to a client component through hydration. Its examples use TanStack Query APIs and TypeScript. After a mutation, the related cache needs updating or invalidation; otherwise the interface can retain old data.

Install it from the templates package with `npx`.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill web-development/tanstack-query-expert
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill tanstack-query-expert -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/tanstack-query-expert/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/tanstack-query-expert/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/tanstack-query-expert/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/tanstack-query-expert/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates tanstack-query-expert
```

2. **Manually: put the files in place**
- File: `.github/skills/tanstack-query-expert/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/web-development/tanstack-query-expert
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/tanstack-query-expert/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/web-development/tanstack-query-expert

## When to use it
- organize data fetching in custom hooks
- choose cache keys for queries
- refresh cached data after a mutation
- apply an optimistic change and undo it on failure
- hydrate server-fetched data in an App Router client component

## Example prompts
- Set up a TanStack Query hook for loading a user profile.
- Show how to refresh the posts cache after creating a post.
- Prepare App Router code that hydrates a client component with server-fetched data.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 495 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md