Skip to content

Latest commit

 

History

History
87 lines (62 loc) · 2.27 KB

README.md

File metadata and controls

87 lines (62 loc) · 2.27 KB

SWR

Introduction

miniSWR is a tiny (<1kb gzipped) baseline implementation of SWR by Vercel, intended for use with Preact.

Features

  • SWR-like API
  • Interval polling
  • Revalidate on focus
  • Revalidate on reconnect
  • Conditional fetching
  • TypeScript support

Not features, but maybe eventually features

  • Pagination
  • Global Configuration
  • Error Retry
  • Initial Data

Getting Started

  1. Install the package:
yarn add mini-swr
  1. Use the same API as SWR:
import useSWR from 'mini-swr'

const useProfile = (userId) => {
  // Fetcher won't fire if userId isn't ready yet
  return useSWR(userId ? `/api/user/${userId}` : null, fetcher)
}

function Profile(userId) {
  const { data, error } = useProfile(userId)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>

  return <div>hello {data.name}!</div>
}

API

const { data, error, isValidating, mutate } = useSWR(key, fetcher, options)

Parameters

  • key: a unique key string for the request (or a function / array / null)
  • fetcher: (optional) a Promise returning function to fetch your data
  • options: (optional) an object of options for this SWR hook

Return Values

  • data: data for the given key resolved by fetcher (or undefined if not loaded)
  • error: error thrown by fetcher (or undefined)
  • isValidating: if there's a request or revalidation loading
  • mutate(data?, shouldRevalidate?): function to mutate the cached data

Options

  • revalidateOnFocus = true: auto revalidate when window gets focused
  • revalidateOnReconnect = true: automatically revalidate when the browser regains a network connection (via navigator.onLine)
  • refreshInterval = 0: polling interval (disabled by default)