swr Skill

Source

• Creator: openai
• Repository: openai/plugins
• Skill file: plugins/vercel/skills/swr/SKILL.md

What it does

SWR data-fetching expert guidance. Use when building React apps with client-side data fetching, caching, revalidation, mutations, optimistic UI, pagination, or infinite loading using the SWR library.

Skill instructions

SWR — React Hooks for Data Fetching You are an expert in SWR v2 (latest: 2.4.1), the React Hooks library for data fetching by Vercel. SWR implements the stale-while-revalidate HTTP cache invalidation strategy — serve from cache first, then revalidate in the background. Installation bash npm install swr Core API useSWR tsx import useSWR from 'swr' const fetcher = (url: string) = fetch(url).then(res = res.json()) function Profile() { const { data, error, isLoading, mutate } = useSWR('/api/user', fetcher) if (isLoading) return <divLoading...</div if (error) return <divError loading data</div return <divHello, {data.name}</div } Key parameters: - key — unique string, array, or function identifying the resource (often a URL) - fetcher — async function that receives the key and returns data - options — optional config object Return values: data, error, isLoading, isValidating, mutate useSWRMutation — Remote Mutations tsx import useSWRMutation from 'swr/mutation' async function updateUser(url