skills.rest
jhs88
jhs88COMMUNITY
Explore all skills by this author →
WebsiteGitHub

tanstack-query

Standardize TanStack Query hooks with useSuspenseQuery and useMutation patterns.

1|Updated Mar 28, 2025
Search Tags:#caching#state management#data fetching#api integration#tanstack query#react query#mutation
One-click install
npx skills add https://github.com/jhs88/my-shadcn-app-monorepo --skill tanstack-query-jhs88
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/jhs88/my-shadcn-app-monorepo/tree/main/.agents/skills/tanstack-query
Command: npx skills add https://github.com/jhs88/my-shadcn-app-monorepo --skill tanstack-query-jhs88

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures consistent and standardized usage of TanStack Query (React Query) hooks and mutations across all frontend applications, simplifying data fetching, state management, and server interactions.

Core Features & Use Cases

  • Standardized Data Fetching: Consistently uses useSuspenseQuery for data retrieval with predictable query key patterns.
  • Robust Mutation Handling: Implements a standardized useMutation pattern for CRUD operations, including error handling, loading states, and cache invalidation.
  • Use Case: When fetching a list of users, you'll use useSuspenseQuery with a key like ["users", filters] and a queryFn that calls fetchUsers(filters). For updating a user, you'll use useMutation with mutationFn: (userData) => updateUser(userData.id, userData), ensuring query invalidation and user feedback upon success or error.

Quick Start

Use the tanstack-query skill to fetch data for a resource with a specific ID.

Frequently Asked Questions about tanstack-query

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize TanStack Query hooks for data fetching in React?▼

You can standardize data fetching by consistently using `useSuspenseQuery` with structured query key naming conventions and predictable query functions to ensure reliable data management and UI updates.

What is the best way to handle mutations and cache invalidation with React Query?▼

Handle mutations by implementing a standardized `useMutation` pattern for CRUD operations that explicitly manages loading states, error handling, and triggers cache invalidation for predictable UI updates.

How do query key naming conventions affect TanStack Query cache management?▼

Consistent query key naming conventions ensure accurate data retrieval and enable reliable cache invalidation patterns across your application during state-changing operations.

Does this approach work for managing loading and error states in React applications?▼

Yes, this approach manages loading and error states by enforcing consistent error handling and loading state patterns across all data fetching and mutation operations in your React application.

Can I use useSuspenseQuery for fetching filtered API data lists?▼

Yes, you can use `useSuspenseQuery` for fetching filtered API data lists by structuring query keys like `["users", filters]` and passing a query function that calls your API with those filters.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tanstack-query

Manage server state and data fetching in React with TanStack Query v5.

Official
Intermediate
saranskumarsaranskumar

frontend-data-fetching-planner

Plan frontend data fetching strategies for React dashboard pages.

Community
Intermediate
algusaemalgusaem

react-ui-patterns

Codify loading, error, and empty state patterns for React components.

Community
Basic
BarisSozenBarisSozen
1

pitfalls-tanstack-query

Solves common TanStack Query v5 pitfalls in data fetching and cache management for React applications.

Community
Intermediate