Does this skill support infinite scrolling or pagination?

Yes, it includes detailed patterns and examples for useSWRInfinite to handle both cursor-based and offset-based pagination efficiently.

How does this skill prevent infinite request loops?

The skill enforces the use of stable keys, such as strings or stable arrays of primitives, and provides guidance on avoiding object or array references that change on every render.

Is SWR compatible with Server-Side Rendering (SSR)?

Yes, the skill covers SWRConfig patterns for handling global defaults and providing fallback data for seamless SSR hydration.

Can I use SWR for POST, PUT, or DELETE requests?

Yes, this skill provides specific patterns for useSWRMutation, which is the recommended hook for write operations to ensure explicit control and predictable state management.

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. Using isValidating as a loading spinner can hide perfectly valid cached data.

SWR Data Fetching Patterns

Name: SWR Data Fetching Patterns
Author: agents-inc

byagents-inc

0•

API開発

Implements production-ready data fetching, caching, and state management using the stale-while-revalidate pattern for React applications.

This skill provides specialized guidance for implementing the SWR (stale-while-revalidate) strategy in React applications, ensuring fast, responsive user interfaces with background data revalidation. It covers essential patterns including typed fetcher implementation, distinguishing between initial loading and background validation states, managing write operations with optimistic updates, and handling complex pagination. By enforcing best practices like stable key usage and proper error handling, this skill helps developers avoid common pitfalls such as infinite request loops and hidden cached data, resulting in more robust and performant web applications.

主な機能

01Advanced pagination support including infinite scroll and cursor-based fetching

02Global configuration patterns for centralized revalidation and SSR hydration

03Production-grade error handling and typed fetcher patterns

040 GitHub stars

05Efficient mutation management with optimistic UI updates and rollbacks

06Optimized stale-while-revalidate caching strategies for React

ユースケース

01Implementing complex forms with optimistic updates and automatic cache invalidation

02Building read-heavy dashboards that require instant data display with background refreshes

03Creating performant infinite-scrolling feeds or paginated lists with useSWRInfinite

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

主な機能

01Advanced pagination support including infinite scroll and cursor-based fetching

02Global configuration patterns for centralized revalidation and SSR hydration

03Production-grade error handling and typed fetcher patterns

040 GitHub stars

05Efficient mutation management with optimistic UI updates and rollbacks

06Optimized stale-while-revalidate caching strategies for React

ユースケース

01Implementing complex forms with optimistic updates and automatic cache invalidation

02Building read-heavy dashboards that require instant data display with background refreshes

03Creating performant infinite-scrolling feeds or paginated lists with useSWRInfinite