AI SummarySWR is a React hook library for efficient data fetching with built-in caching, revalidation, and real-time updates. Developers building API-driven applications benefit from simplified server state management and automatic synchronization.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "swr" skill in my project. Repository: https://github.com/majiayu000/claude-skill-registry Please read the repo to find the SKILL.md file(s), then: 1. Download them into the correct skills directory (.claude/skills/ or .cursor/skills/) 2. Include any companion files referenced by the skill 3. Confirm what was installed and where
Description
SWR data fetching - useSWR, mutations, revalidation, caching. Use when fetching API data, implementing real-time updates, or managing server state.
Basic Usage
`tsx import useSWR from 'swr' const fetcher = (url: string) => fetch(url).then(res => res.json()) function Profile() { const { data, error, isLoading } = useSWR('/api/user', fetcher) if (isLoading) return <div>Loading...</div> if (error) return <div>Error: {error.message}</div> return <div>Hello, {data.name}</div> } `
With TypeScript
`tsx interface User { id: string name: string email: string } function Profile() { const { data, error, isLoading } = useSWR<User>('/api/user', fetcher) return <div>{data?.name}</div> } `
Fetcher Options
`tsx // Simple fetcher const fetcher = (url: string) => fetch(url).then(r => r.json()) // With headers const fetcher = (url: string) => fetch(url, { headers: { Authorization: Bearer ${token} } }).then(r => r.json()) // With error handling const fetcher = async (url: string) => { const res = await fetch(url) if (!res.ok) { const error = new Error('An error occurred') error.info = await res.json() error.status = res.status throw error } return res.json() } `
SWR Options
`tsx const { data, error, isLoading, isValidating, mutate } = useSWR('/api/data', fetcher, { revalidateOnFocus: true, // Revalidate on window focus revalidateOnReconnect: true, // Revalidate on network reconnect refreshInterval: 0, // Polling interval (ms), 0 = disabled refreshWhenHidden: false, // Refresh when tab hidden refreshWhenOffline: false, // Refresh when offline shouldRetryOnError: true, // Retry on error dedupingInterval: 2000, // Dedupe requests within interval focusThrottleInterval: 5000, // Throttle focus revalidation loadingTimeout: 3000, // Loading timeout before onLoadingSlow errorRetryInterval: 5000, // Error retry interval errorRetryCount: 3, // Max retry count fallbackData: undefined, // Initial data keepPreviousData: false, // Keep previous data on key change suspense: false, // Enable React Suspense }) `
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster