Skip to content

danybeltran/swr-micro

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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