skills.rest
andershi666
andershi666COMMUNITY
Explore all skills by this author →
GitHub

data-fetching

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

1|Updated Apr 14, 2026
Search Tags:#architecture#frontend#zustand#swr#api-calls#data-fetching#service-layer
One-click install
npx skills add https://github.com/andershi666/lobehub-hr-demo --skill data-fetching-andershi666
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-fetching
Source: https://github.com/andershi666/lobehub-hr-demo/tree/main/lobehub/.agents/skills/data-fetching
Command: npx skills add https://github.com/andershi666/lobehub-hr-demo --skill data-fetching-andershi666

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Data fetching in modern front-end applications often becomes fragmented across services, stores, and UI components. This Skill provides a cohesive pattern that centralizes API calls in a dedicated service layer and promotes SWR-based data hooks within a Zustand store, enabling consistent caching, revalidation, and optimistic updates.

Core Features & Use Cases

  • Unified Service Layer: Encapsulate all API calls behind typed services to ensure a single source of truth.
  • SWR-driven Stores: Leverage SWR hooks within Zustand stores to manage caching, revalidation, and data flow.
  • Migration Guidance: Provide a path to replace useEffect-based data loading with predictable, hook-based data fetching.

Quick Start

Use the skill to set up a domain service, connect it to a Zustand store, and implement SWR-based hooks to fetch and cache data instead of useEffect.

Frequently Asked Questions about data-fetching

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

FAQPage Schema
How do I standardize data fetching with Zustand and SWR?▼

To standardize data fetching with Zustand and SWR, you centralize API calls in a typed service layer and use SWR hooks within Zustand stores to manage caching, revalidation, and optimistic updates for consistent front-end data flow.

Why should I migrate away from useEffect for data loading?▼

You should migrate away from useEffect for data loading to replace fragmented component-level fetching with predictable SWR-based hooks that handle caching, revalidation, and state management centrally within your Zustand store.

What is a service layer in frontend architecture?▼

A service layer in frontend architecture is a dedicated module that encapsulates all API calls behind typed services, establishing a single source of truth for data fetching before connecting to SWR hooks and Zustand stores.

How do I handle cache invalidation after mutations using SWR?▼

You handle cache invalidation after mutations using SWR by applying optimistic updates to your Zustand store and triggering SWR's revalidation mechanisms to ensure the UI reflects the latest server state accurately.

Does this data fetching pattern work without a dedicated service layer?▼

This data fetching pattern enforces using a dedicated service layer for API calls to ensure a single source of truth, so working without it breaks the centralized architecture and consistent cache management this approach provides.

Related Skills

Explore More Software Engineering Skills→
xkl2013xkl2013

data-fetching-architecture

Automate LobeHub data fetching with Zustand and SWR hooks.

Community
Advanced
mDevsLabsmDevsLabs
1

data-fetching-architecture

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

Community
Advanced
aroidoaroido

agent-api-integrator

Generate type-safe API clients and React Query hooks from API specifications.

Official
Intermediate
AI-Foundry-CoreAI-Foundry-Core
4

react-state-management

Manage React state across local, global, and server contexts.

Official
Advanced