skills.rest
gizix
gizixCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

query-patterns

Implement TanStack Query data-fetching patterns for React and TypeScript applications.

2|2|Updated Nov 4, 2025
Search Tags:#typescript#caching#frontend#API integration#data fetching#mutations#optimistic updates#react query
One-click install
npx skills add https://github.com/gizix/cc_projects --skill query-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: query-patterns
Source: https://github.com/gizix/cc_projects/tree/main/react-template/.claude/skills/query-patterns
Command: npx skills add https://github.com/gizix/cc_projects --skill query-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-query, axios.

What problem does it solve?

This Skill simplifies complex data fetching, caching, and synchronization in React applications using TanStack Query, eliminating boilerplate code, ensuring consistent state, and improving user experience.

Core Features & Use Cases

  • Organized Query Structure: Provides a clean separation of API calls, query keys, and custom hooks for maintainable data fetching logic.
  • Infinite & Dependent Queries: Implement advanced pagination (infinite scroll) and manage data dependencies between queries.
  • Optimistic Updates & Prefetching: Enhance user experience with instant UI feedback for mutations and improved perceived performance through data preloading.
  • Use Case: When integrating a new API endpoint for a paginated list of users, use this skill to generate the useInfiniteUsers hook, userKeys factory, and usersApi service, complete with caching and invalidation strategies.

Quick Start

Use the query-patterns skill to generate a basic useQuery hook for fetching a list of products, including query keys and API service.

Frequently Asked Questions about query-patterns

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

FAQPage Schema
How do I set up efficient data fetching and caching in React with TanStack Query?▼

TanStack Query handles data fetching, caching, and synchronization automatically. Structure your setup using query keys, API services, and custom hooks to manage state, invalidate cache, and sync server data with your UI without manual boilerplate.

What's the best way to implement optimistic updates in React mutations?▼

Optimistic updates reflect changes in the UI immediately before the server confirms them. Use TanStack Query's mutation hooks to update local cache instantly, then revert if the request fails, creating a seamless user experience for forms and deletions.

How do I handle infinite scroll pagination with React Query?▼

Infinite pagination in React Query uses `useInfiniteQuery` to fetch data in pages and append new results to existing data. Combine it with a query factory for consistent key management and cache invalidation across your application.

Can I use TanStack Query with TypeScript for type-safe API integration?▼

Yes. TanStack Query works seamlessly with TypeScript to provide typed query hooks, API services, and response models. This ensures compile-time safety and autocompletion for data-fetching logic across your React application.

Do I need separate code for managing API requests, caching, and cache invalidation?▼

No. This Skill consolidates API calls, query keys, and hooks into organized patterns—a single service layer handles requests, caching strategies are built into hooks, and invalidation rules are defined centrally for consistency.

What are the limitations of client-side caching in React applications?▼

Client-side caching works best for non-critical data and short sessions. Stale data, manual invalidation complexity, and memory constraints are trade-offs. TanStack Query mitigates these with configurable TTLs, smart invalidation, and garbage collection.

Related Skills

Explore More Software Engineering Skills→
masanao-ohbamasanao-ohba
2

react-query-patterns

Automate TanStack React Query server state patterns in TypeScript React projects.

Community
Intermediate
Omar-ObandoOmar-Obando
44

offline-first-development

Implement offline-first local persistence and synchronization for web applications.

Community
Advanced
Yoriichi-DangYoriichi-Dang

tanstack-query-best-practices

Structure TanStack Query data fetching, caching, and server state in React applications.

Community
Advanced
pluginagentmarketplacepluginagentmarketplace
1

frontend-patterns

Standardize React API integration patterns for data fetching and state management.

Community
Intermediate