What is the main advantage of using SWR for data fetching?

SWR follows the stale-while-revalidate strategy, which improves user experience by showing cached data immediately while fetching fresh data in the background to ensure the UI stays up-to-date.

How does this skill handle loading states correctly?

The skill enforces the distinction between isLoading (initial load with no data) and isValidating (any background refresh), preventing common UI issues like flickering spinners during revalidation.

Can I use this skill for POST or PUT requests?

Yes, it provides specific patterns for useSWRMutation, which is designed specifically for write operations and manual triggers, keeping them separate from read-only data hooks.

Does it support infinite scrolling?

Yes, it includes patterns for useSWRInfinite to manage cursor and offset-based pagination, including logic to detect the end of a list and prevent unnecessary requests.

SWR Data Fetching Patterns

Name: SWR Data Fetching Patterns
Author: agents-inc

byagents-inc

0•

API 开发

Implements efficient React data fetching and caching patterns using the SWR strategy for high-performance, responsive web applications.

This skill provides specialized guidance for implementing SWR-based data fetching in React applications, focusing on the 'stale-while-revalidate' philosophy. It equips Claude with industry-standard best practices for handling complex caching scenarios, implementing optimistic UI updates, managing infinite scroll pagination, and avoiding common pitfalls like unstable keys or incorrect loading states. By standardizing fetcher types and revalidation strategies, it ensures developers can build efficient, type-safe, and responsive data layers for modern web interfaces.

主要功能

01Stale-while-revalidate caching and background revalidation logic

02Optimistic UI updates with automatic rollback on error

03Infinite scroll and cursor-based pagination using useSWRInfinite

04Conditional and dependent query handling via null key patterns

05Global configuration management and typed fetcher implementations

060 GitHub stars

使用场景

01Building read-heavy dashboards that require seamless background data refreshing

02Implementing fast-response form submissions with optimistic state management

03Creating performant infinite scrolling social feeds or paginated product lists

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

主要功能

01Stale-while-revalidate caching and background revalidation logic

02Optimistic UI updates with automatic rollback on error

03Infinite scroll and cursor-based pagination using useSWRInfinite

04Conditional and dependent query handling via null key patterns

05Global configuration management and typed fetcher implementations

060 GitHub stars

使用场景

01Building read-heavy dashboards that require seamless background data refreshing

02Implementing fast-response form submissions with optimistic state management

03Creating performant infinite scrolling social feeds or paginated product lists

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