tanstack-query-hook_skill

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.