react-data-fetching

Fetch and cache React data with SWR using a centralized fetcher.

Updated Jan 2, 2026

Search Tags:#typescript #caching #react #swr #hook #data-fetching #fetcher

Ready to run

npx skills add https://github.com/tanaka-mambinge/dotfiles --skill react-data-fetching

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-data-fetching
Source: https://github.com/tanaka-mambinge/dotfiles/tree/main/ai-configs/skills/react-data-fetching
Command: npx skills add https://github.com/tanaka-mambinge/dotfiles --skill react-data-fetching

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Data fetching in React apps often leads to boilerplate, repetitive fetch logic, and inconsistent error handling. This Skill provides a reusable pattern using SWR to centralize data fetching, caching, and revalidation, reducing boilerplate and improving UX.

Core Features & Use Cases

SWR-based data fetching: Simplifies data fetching, caching, and automatic revalidation in React apps.
Centralized Fetcher: A single fetcher utility that handles auth headers, error handling, and JSON parsing.
Type Safety: TypeScript generics to ensure safe API responses.
Use Case: Build a products list in a dashboard by fetching /api/v1/products with automatic refresh and optimistic updates.

Quick Start

Create a SWR-powered data fetch in a React component by importing the centralized fetcher and calling useSWR with your API endpoint.

Frequently Asked Questions about react-data-fetching

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

FAQPage Schema

How do I reduce boilerplate when data fetching in React applications?▼

Using SWR for data fetching in React reduces boilerplate by centralizing API calls, caching, and automatic revalidation into a reusable hook-based workflow. This approach eliminates repetitive fetch logic and standardizes error handling across components.

How do I set up a centralized fetcher for API calls in React?▼

To set up a centralized fetcher in React, create a single utility that handles authentication headers, JSON parsing, and error handling. You then import this fetcher and pass it to useSWR with your API endpoint to manage data fetching consistently.

Does SWR work with React Native for caching and data fetching?▼

Yes, SWR works with React Native for caching and data fetching. This data fetching strategy applies to both web and React Native scenarios, providing automatic revalidation and type-safe API responses across different React platforms.

How do I handle API errors and type safety when fetching data with SWR?▼

You handle API errors and ensure type safety in SWR by using a centralized fetcher for consistent error handling alongside TypeScript generics. This combination guarantees typed API responses and manages exceptions through a reusable hook workflow.

What is the best way to manage automatic revalidation and optimistic updates in React?▼

The best way to manage automatic revalidation and optimistic updates in React is using SWR. It simplifies data management by automatically refreshing data from the cache while allowing optimistic UI changes during mutations.

Why should I use SWR instead of writing custom React data fetching hooks?▼

You should use SWR instead of custom React data fetching hooks to avoid inconsistent error handling and repetitive logic. SWR provides built-in caching, revalidation, and a centralized fetcher, significantly reducing boilerplate code.