swr-micro

swr-micro

A lightweight SWR implementation using atomic-state

Example code

import useSWR from 'swr-micro'

const fetcher = (url, config) => fetch(url, config)

export default function Page() {
  const [page, setPage] = useState(1)

  const { data, loading, error, revalidating } = useSWR('https://jsonplaceholder.typicode.com/todos/[id]', {
    params: {
      id: page
    }
  })

  if(loading) return <p>Loading</p>

  if(error) return <p>Error</p>

  return (
    <main>
      <div
        style={{
          display: 'flex',
          justifyContent: 'center'
        }}>
        <button onClick={() => setPage(page - 1)}>{'<'}</button>
        <div style={{ width: '60px', textAlign: 'center' }}>{page}</div>
        <button onClick={() => setPage(page + 1)}>{'>'}</button>
      </div>
      <br />
      <button onClick={todo.revalidate}>Refresh</button>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </main>
  )
}

Note that revalidating will not be true during the first revalidation

Features:

• Pagination
• Request deduplication
• Data dependency
• Local mutation for optimistic UI
• Suspense
• Custom fetcher (e.g. axios, fetch)
• Search params
• Revalidate with interval
• Error-retry
• Retry on reconnect