data-fetching

Name: data-fetching
Availability: InStock
Author: andershi666

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

Ready to run

npx skills add https://github.com/andershi666/lobehub-hr-demo --skill data-fetching-andershi666

💬 Prompt for ChatGPT / Claude Chat▼

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.