skills.rest
zmh13928433602-sys
zmh13928433602-sysCOMMUNITY
Explore all skills by this author →
GitHub

data-fetching

Standardize client-side API data fetching with service, Zustand store, and SWR hooks.

Updated May 11, 2026
Search Tags:#architecture#store#zustand#swr#api-calls#data-fetching#service-layer
One-click install
npx skills add https://github.com/zmh13928433602-sys/lobe-chat --skill data-fetching-zmh13928433602-sys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-fetching
Source: https://github.com/zmh13928433602-sys/lobe-chat/tree/main/.agents/skills/data-fetching
Command: npx skills add https://github.com/zmh13928433602-sys/lobe-chat --skill data-fetching-zmh13928433602-sys

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Data-fetching in client apps is often ad-hoc, using useEffect and scattered logic. This Skill standardizes how to fetch, cache, and manage API data by combining a Service Layer, Zustand store, and SWR hooks, reducing boilerplate and errors.

Core Features & Use Cases

  • Service layer guarantees typed API calls and single source of truth.
  • Store + SWR pattern centralizes data fetching, caching, and cache invalidation.
  • Supports optimistic updates, selective detail caching, and structured state for scalable dashboards.
  • Use cases include onboarding new APIs, migrating from useEffect, and building data-driven UIs with reliable caching.

Quick Start

Create a new data-fetching flow by wiring a service, store, and SWR hooks to fetch and cache API data.

Frequently Asked Questions about data-fetching

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

FAQPage Schema
What is the best way to manage API data fetching and caching in React without useEffect boilerplate?▼

Standardizing API data fetching through a service layer, Zustand store, and SWR hooks eliminates ad-hoc useEffect logic by centralizing data management, caching, and invalidation to ensure consistency across scalable dashboards.

How do I migrate my existing React data fetching logic from useEffect to SWR and Zustand?▼

To migrate from useEffect, wire a typed service layer for API calls into a Zustand store, then attach SWR hooks to manage caching and structured state, replacing scattered fetching logic with a single source of truth.

Can I use SWR with Zustand to handle optimistic updates and selective detail caching?▼

Yes, combining SWR hooks with a Zustand store enables optimistic updates and selective detail caching by defining structured state and cache invalidation strategies within the centralized service layer pattern.

Does this service layer and SWR pattern work well for building scalable data-driven dashboards?▼

Yes, the service layer and SWR pattern supports scalable data-driven UIs by providing a single source of truth for typed API calls, centralized cache management, and structured state across analytics dashboards.

Why should I standardize client-side data fetching with a service layer instead of scattered API calls?▼

Standardizing client-side data fetching with a service layer guarantees typed API calls and a single source of truth, reducing boilerplate and errors while ensuring reliable caching and refresh strategies across components.

Related Skills

Explore More Software Engineering Skills→
addisualemuaddisualemu

expo-api-agent

Create and edit API clients, endpoints, types, and data-fetching hooks in Expo applications.

Community
Intermediate
mDevsLabsmDevsLabs
1

data-fetching-architecture

Standardize client-side data fetching with service layers, Zustand stores, and SWR hooks.

Community
Advanced
alceupassosalceupassos

store-data-structures

Structure Zustand store data for lists, details, caching, and optimistic updates.

Community
Intermediate
andershi666andershi666
1

data-fetching

Define a service–store–SWR pattern for front-end data fetching.

Community
Advanced