home / skills / ehtbanton / claudeskillsrepo / tanstack-query-hook

tanstack-query-hook skill

safe

/tanstack-query-hook

This skill generates complete TanStack Query v5 hooks for data fetching and mutations in TypeScript projects.

npx playbooks add skill ehtbanton/claudeskillsrepo --skill tanstack-query-hook

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

673 B

---
name: tanstack-query-hook
description: Generate TanStack Query hooks for data fetching and mutations. Triggers on "create tanstack query hook", "generate react query", "useQuery hook", "useMutation hook".
---

# TanStack Query Hook Generator

Generate TanStack Query hooks for data fetching and caching.

## Output Requirements

**File Output:** `use*.ts` hook files
**Format:** Valid TanStack Query v5
**Standards:** TanStack Query 5.x, TypeScript

## When Invoked

Immediately generate complete query and mutation hooks.

## Example Invocations

**Prompt:** "Create TanStack Query hooks for products"
**Output:** Complete `useProducts.ts` with queries and mutations.

Overview

This skill generates ready-to-use TanStack Query (v5) hooks in TypeScript for data fetching and mutations. It emits complete use*.ts files that follow TanStack Query patterns and TypeScript typings. Use it to quickly scaffold useQuery and useMutation hooks tailored to your API shape and caching needs.

How this skill works

When invoked, the skill creates a full TypeScript hook file (use<Name>.ts) implementing useQuery and useMutation according to TanStack Query v5. It produces typed query keys, fetcher functions, error handling, cache invalidation, and optional optimistic update scaffolding. Output is formatted for immediate use in a React/TypeScript codebase.

When to use it

Scaffold data fetching and mutation hooks for a new resource (products, users, orders).
Replace repetitive query/mutation boilerplate with consistent, typed hooks.
Create paginated or infinite scrolling queries quickly.
Add mutation hooks with cache invalidation or optimistic updates.
Ensure all hooks follow TanStack Query v5 conventions and TypeScript types.

Best practices

Name hooks `use<Resource>` or `use<Resource>Mutation` and export them from use*.ts files.
Define precise TypeScript types for request/response shapes and query keys.
Include concise error handling and loading states; return typed results from hooks.
Use stable query keys and include resource IDs in keys to avoid cache collisions.
Invalidate or update relevant queries after mutations; prefer optimistic updates for responsive UX.

Example use cases

Create useProducts.ts with getProducts (paginated), getProductById, createProduct, updateProduct, deleteProduct hooks.
Generate useAuth.ts for signIn, signOut, refreshToken with proper cache updates.
Scaffold useComments.ts with infinite query for comment streams and createComment mutation with optimistic update.
Produce useOrders.ts that includes filters, sorting in query keys and a mutation to update order status with query invalidation.

FAQ

Which TanStack Query version is supported?

The generated hooks target TanStack Query v5 and TypeScript types compatible with that major version.

Can I customize fetch logic or HTTP client?

Yes. The generator outputs a clear fetcher function you can swap to use fetch, axios, or your API client and adapt request/response handling.