skills.rest
chinomartinez
chinomartinezCOMMUNITY
Explore all skills by this author →
GitHub

frontend-data-fetching

Manage server state with TanStack Query hooks and service layers.

Updated Feb 25, 2026
Search Tags:#api#react#tanstack#cache#query#data-fetching
One-click install
npx skills add https://github.com/chinomartinez/SmartPocket --skill frontend-data-fetching
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-data-fetching
Source: https://github.com/chinomartinez/SmartPocket/tree/main/.agents/skills/frontend-data-fetching
Command: npx skills add https://github.com/chinomartinez/SmartPocket --skill frontend-data-fetching

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Solves the complexity of data fetching and server state management in SmartPocket apps.

Core Features & Use Cases

  • UseQuery and useMutation hooks to fetch and mutate data with TanStack Query.
  • Centralized service layer and query key factories to ensure consistent caching and invalidation.
  • Patterns for cache invalidation, optimistic updates, and server state synchronization across components.

Quick Start

Implement a sample API call using useQuery and useMutation with a service layer following the patterns described.

Frequently Asked Questions about frontend-data-fetching

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

FAQPage Schema
How do I manage server state and data fetching in React without inconsistent caching?▼

You can manage server state by implementing TanStack Query with a centralized service layer and query key factories. This enforces consistent data fetching, caching, and invalidation across your React components.

What is the best way to structure API calls and mutations with TanStack Query?▼

The best way to structure API calls and mutations is by using useQuery for fetching and useMutation for modifying data. A centralized service layer ensures your logic remains decoupled and consistently applied.

How does cache invalidation work across React components when using useMutation?▼

Cache invalidation works by using query key factories to systematically identify and refetch affected data. This ensures server state synchronization across components after a mutation completes.

Can I apply optimistic updates when handling API mutations in a React app?▼

Yes, you can apply optimistic updates by configuring useMutation patterns. This allows your UI to immediately reflect predicted changes while the server processes the request in the background.

What are common anti-patterns when handling API data fetching in React components?▼

Common anti-patterns include scattering API logic directly in components and using inconsistent query keys. Defining a centralized service layer and query key factories prevents these unreliable server state issues.

Related Skills

Explore More Software Engineering Skills→
chad3814chad3814

TypeScript Type Definitions

Define strongly-typed TypeScript interfaces for video data structures.

Community
Intermediate
cenjiecenjie

state-management

Implement React Query and Zustand patterns for server and client state.

Community
Advanced
armanzeroeightarmanzeroeight
29

state-management-advisor

Advise on selecting React state management solutions with decision trees and code examples.

Community
Intermediate
Yoriichi-DangYoriichi-Dang

tanstack-query-best-practices

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

Community
Advanced