skills.rest
GSU26SE55
GSU26SE55OFFICIAL
Explore all skills by this author →
GitHub

hook

Creates TanStack Query hooks for React data fetching, mutations, and cache management.

1|Updated Apr 27, 2026
Search Tags:#typescript#react#data fetching#cache invalidation#tanstack query#usequery#usemutation
One-click install
npx skills add https://github.com/GSU26SE55/backend --skill hook-gsu26se55
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hook
Source: https://github.com/GSU26SE55/backend/tree/main/.codex/skills/fe/hook
Command: npx skills add https://github.com/GSU26SE55/backend --skill hook-gsu26se55

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing TanStack Query hooks inconsistently leads to scattered query keys, wrong cache timings, and duplicated error handling across a React frontend. This Skill enforces a single convention for useQuery and useMutation hooks so server state stays predictable. ## Core Features & Use Cases - Standardized Query Keys: Uses QUERY_KEY factories and KEY roots from shared/utils/queryKeys.ts instead of inline arrays, making cache invalidation broad or narrow as needed. - Cache Strategy per Data Type: Provides a staleTime and refetchInterval table for ticket queues, SLA countdowns, battery lists, configs, dashboards, and user lists. - Mutation Error Handling: Routes non-form errors through handleErrorApi and form submissions through try-catch with setError to map EntityError field errors. - Use Case: When building an SLA countdown view, generate a useTicketDetail hook with staleTime 0 and refetchInterval 30s, paired with a local setInterval countdown display. ## Quick Start Ask the AI to create a TanStack Query hook for fetching a battery list with proper query keys, cache timing, and error handling following the project conventions.

Frequently Asked Questions about hook

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

FAQPage Schema
How do I create a TanStack Query useQuery hook in React?▼

Define a hook that calls useQuery with a queryKey from the QUERY_KEY factory and a queryFn calling the service method. Set staleTime based on the data type, for example 5 minutes for battery lists, and add enabled guards for detail queries requiring an id.

How to handle TanStack Query mutation errors in forms?▼

Use try-catch around mutateAsync in the submit handler and pass setError to handleErrorApi. EntityError responses map to specific form fields via setError, while HttpError responses trigger a toast notification.

What staleTime should I use for TanStack Query cache?▼

Match staleTime to data volatility: 30 seconds for ticket queues, 0 with refetchInterval for SLA countdowns, 5 minutes for battery and user lists, 10 minutes for configs, and 1 minute for dashboard stats.

Does staleTime 0 make TanStack Query poll automatically?▼

No, staleTime 0 only marks data as immediately stale and does not trigger refetching. You must pair it with refetchInterval, such as 30000 milliseconds, to achieve true polling behavior.

How do I invalidate TanStack Query cache after a mutation?▼

Call queryClient.invalidateQueries in onSuccess with the KEY root like KEY.batteries to invalidate all related queries, or use QUERY_KEY.batteries.detail(id) to invalidate a single record narrowly.

Related Skills

Explore More Software Engineering Skills→
moking55moking55

map-api-backend-to-fontend

Map backend API endpoints to Next.js frontend hooks and types.

Community
Intermediate
azadshaikhazadshaikh

inertia-form-system

Build and update React forms with Inertia and shadcn validation.

Community
Intermediate
chinomartinezchinomartinez

frontend-error-handling

Centralize API error handling in React with RFC 7807 normalization.

Community
Advanced
lunaticwithaducklunaticwithaduck

data-state

Compare React data-state libraries and recommend migration patterns for API fetching and persistence.

Community
Advanced