data-fetching-patterns

What problem does it solve?

Managing data fetching, caching, loading states, and error handling in modern web applications can be complex and lead to inconsistent user experiences. This skill provides a comprehensive guide to SWR-based data fetching patterns, ensuring efficient, robust, and consistent API interactions across the monorepo.

Core Features & Use Cases

• SWR-Powered Data Management: Covers basic SWR usage, custom hook patterns, and advanced configurations for caching, revalidation, polling, and infinite loading.
• Robust Error & Loading States: Guides on implementing graceful loading indicators, comprehensive error handling in components, and global error management.
• Mock Data & Mutations: Explains how to set up mock data for development, implement optimistic updates, and manage data revalidation after mutations.
• Use Case: When building a new feature that displays data from an API, use this skill to create a custom SWR hook, implement skeleton loaders for loading states, and provide clear error messages if the fetch fails.

Quick Start

Create a custom SWR hook to fetch user information from /auth/api/v1/user-info. import { useUserInfo } from './hooks/useUserInfo'; const { user, isLoading, error } = useUserInfo();