What is the difference between isLoading and isValidating in SWR?

isLoading is true only during the initial fetch when no data is present, while isValidating is true during any request, including background refreshes. This skill teaches you to use them correctly to avoid flickering UIs.

How does this skill prevent infinite request loops?

It provides strict guidance on maintaining stable keys (strings or stable arrays) to ensure that re-renders don't inadvertently trigger new, redundant network requests.

What is the primary benefit of the stale-while-revalidate strategy?

It allows the UI to remain responsive by showing cached data immediately while fetching fresh data in the background, minimizing the time users spend looking at loading spinners.

Does this skill handle POST and PUT requests?

Yes, it includes specific patterns for useSWRMutation, which is designed for write operations and provides tools for managing mutation states and optimistic UI updates.

Web Data Fetching with SWR

Name: Web Data Fetching with SWR
Author: agents-inc

byagents-inc

0•

API 开发

Implements high-performance data fetching and caching patterns using the stale-while-revalidate strategy in React applications.

This skill provides a standardized framework for implementing SWR (stale-while-revalidate) in React projects, enabling developers to build fast, responsive UIs that show cached data immediately while revalidating in the background. It covers everything from basic useSWR hooks and typed fetchers to advanced useSWRMutation patterns for write operations with optimistic updates. By following these implementation patterns, developers avoid common pitfalls like infinite request loops caused by unstable keys and incorrect loading state handling, ensuring efficient network usage and superior user experiences.

主要功能

010 GitHub stars

02Infinite scroll and cursor-based pagination patterns

03Type-safe fetcher implementations and global SWR configuration

04Stale-while-revalidate caching for instant UI updates

05Smart revalidation on window focus and network recovery

06Optimistic UI updates with automatic error rollback

使用场景

01Building real-time dashboards that require background data synchronization

02Implementing infinite scrolling social feeds or product catalogs

03Managing complex form submissions with immediate UI feedback and cache invalidation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-data-fetching-swr

For use in Claude.ai and ChatGPT

主要功能

010 GitHub stars

02Infinite scroll and cursor-based pagination patterns

03Type-safe fetcher implementations and global SWR configuration

04Stale-while-revalidate caching for instant UI updates

05Smart revalidation on window focus and network recovery

06Optimistic UI updates with automatic error rollback

使用场景

01Building real-time dashboards that require background data synchronization

02Implementing infinite scrolling social feeds or product catalogs

03Managing complex form submissions with immediate UI feedback and cache invalidation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-data-fetching-swr

For use in Claude.ai and ChatGPT