From 4b2f102af8ad9e4c972c72355f996aa18b7306e9 Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Thu, 7 Nov 2019 04:57:07 +0800 Subject: [PATCH 01/11] improve styles --- README.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 98ab7c019..8d36eaaf7 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,5 @@ [![SWR](https://assets.zeit.co/image/upload/v1572289618/swr/banner.png)](https://swr.now.sh) -

- swr.now.sh -

-

@@ -21,9 +17,11 @@ ## Intro +[swr.now.sh](https://swr.now.sh) + SWR is a React Hooks library for remote data fetching. -The name “**SWR**” is derived from `stale-while-revalidate`, a HTTP cache invalidation strategy popularized by [RFC 5861](https://tools.ietf.org/html/rfc5861). +The name “**SWR**” is derived from `stale-while-revalidate`, a HTTP cache invalidation strategy popularized by [RFC 5861](https://tools.ietf.org/html/rfc5861). **SWR** first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again. It features: From 8f5cb8077ba6a6696e5d1f8fbe8edc6c23c05d93 Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Thu, 7 Nov 2019 06:15:56 +0800 Subject: [PATCH 02/11] improve code snippets --- README.md | 135 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 70 insertions(+), 65 deletions(-) diff --git a/README.md b/README.md index 8d36eaaf7..36ec0094b 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@

-## Intro +## Introduction [swr.now.sh](https://swr.now.sh) @@ -35,7 +35,7 @@ It features: - Suspense mode - Minimal API -With SWR, components will get a stream of data updates constantly and automatically, Thus, the UI will be always fast and reactive. +With SWR, components will get **a stream of data updates constantly and automatically**. Thus, the UI will be always **fast** and **reactive**. ## Quick Start @@ -64,21 +64,11 @@ of `fetcher` and rerenders the component. Note that `fetcher` can be any asynchronous function, so you can use your favourite data-fetching library to handle that part. ---- +We also have many other [demos and use cases](https://swr.now.sh) showing the power of SWR on the website. -- API - - [`useSWR`](#useswr) - - [`SWRConfig`](#swrconfig) - - [`mutate`](#mutate) - - [`trigger`](#trigger) -- Examples - - [Suspense Mode](#suspense-mode) - - [Subscription (e.g.: socket.io)](#subscription-eg-socketio) - - [Dependent Fetching](#dependent-fetching) +## Usage -## API - -### `useSWR` +### API ```js const { @@ -122,74 +112,87 @@ const { data } = useSWR(() => shouldFetch ? '/api/data' : null, fetcher) const { data } = useSWR(() => '/api/data?uid=' + user.id, fetcher) ``` -### `SWRConfig` +### Global Configuration -A context to provide global configurations (`swrOptions`) for SWR. +A context to provide global configurations (`swrOptions`) for SWR. +In this example, all the SWRs will use the native `fetch` to load data as JSON, and refresh every 3 seconds. ```js import useSWR, { SWRConfig } from 'swr' -function App () { - // all the SWRs inside will use `refreshInterval: 1000` - // and the native `fetch` implementation - return fetch(...args).then(res => res.json()) - }}> - - -} - function Profile () { - const { data, error } = useSWR('/api/user') + const { data, error, isValidating } = useSWR('/api/user') // ... } + +function App () { + return ( + fetch(...args).then(res => res.json()) + }}> + + ... + + ) +} ``` -### `mutate` +### Manually Revalidate -With `mutate`, you can update your local data programmatically, while -revalidating and finally replace it. +You can broadcast a revalidation message to all SWR data inside any component by calling +`trigger(key)`. -```js -import useSWR, { mutate } from 'swr' +This example shows how to automatically refetch the login info (e.g.: inside ``) +when the user clicks the “Logout” button. -function Profile () { - const { data } = useSWR('/api/user', fetcher) +```js +import useSWR, { trigger } from 'swr' - return
-

My name is {data.name}.

- -
+function App () { + return ( +
+ + +
+ ) } ``` -### `trigger` +### Local Mutation -You can broadcast a revalidation message to all SWR data inside any component by calling -`trigger(key)`. +In many cases, applying local mutations to data is a good way to make changes +feel faster — no need to wait for the remote source of data. + +With `mutate`, you can update your local data programmatically, while +revalidating and finally replace it with the latest data. ```js -import useSWR, { trigger } from 'swr' +import useSWR, { mutate } from 'swr' -function App () { - return
- - -
+function Profile () { + const { data } = useSWR('/api/user', fetcher) + + return ( +
+

My name is {data.name}.

+ +
+ ) } ``` @@ -209,9 +212,11 @@ function Profile () { } function App () { - return loading...}> - - + return ( + loading...}> + + + ) } ``` From bd09529e8b01f2893c7caa5afcfce063b015e04c Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Thu, 7 Nov 2019 06:26:25 +0800 Subject: [PATCH 03/11] add small logo --- .github/assets/logo.svg | 5 +++++ README.md | 20 ++++++++++++++++++-- 2 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 .github/assets/logo.svg diff --git a/.github/assets/logo.svg b/.github/assets/logo.svg new file mode 100644 index 000000000..1880d0e9c --- /dev/null +++ b/.github/assets/logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/README.md b/README.md index 36ec0094b..05af8a77a 100644 --- a/README.md +++ b/README.md @@ -39,8 +39,6 @@ With SWR, components will get **a stream of data updates constantly and automati ## Quick Start -To install, run `yarn add swr` or `npm install swr` in your React project. - ```js import useSWR from 'swr' @@ -66,8 +64,24 @@ library to handle that part. We also have many other [demos and use cases](https://swr.now.sh) showing the power of SWR on the website. + + + + ## Usage +Inside your React project directory, run the following: + +``` +yarn add swr +``` + +Or with npm: + +``` +npm install swr +``` + ### API ```js @@ -284,3 +298,5 @@ Thanks to Ryan Chen for providing the awesome `swr` npm package name! ## License The MIT License. + +[![SWR](.github/assets/logo.svg)](https://swr.now.sh) From 810f848ad826589a76c12c62782c5b9831072558 Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Thu, 7 Nov 2019 06:28:11 +0800 Subject: [PATCH 04/11] delete assets --- .github/assets/logo.svg | 5 ----- README.md | 6 ------ 2 files changed, 11 deletions(-) delete mode 100644 .github/assets/logo.svg diff --git a/.github/assets/logo.svg b/.github/assets/logo.svg deleted file mode 100644 index 1880d0e9c..000000000 --- a/.github/assets/logo.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/README.md b/README.md index 05af8a77a..fa8da8809 100644 --- a/README.md +++ b/README.md @@ -64,10 +64,6 @@ library to handle that part. We also have many other [demos and use cases](https://swr.now.sh) showing the power of SWR on the website. - - - - ## Usage Inside your React project directory, run the following: @@ -298,5 +294,3 @@ Thanks to Ryan Chen for providing the awesome `swr` npm package name! ## License The MIT License. - -[![SWR](.github/assets/logo.svg)](https://swr.now.sh) From 97900e37f62cd5a5f9df5edd05fa3bc30fed0e3f Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Thu, 7 Nov 2019 08:35:39 +0800 Subject: [PATCH 05/11] improve docs --- README.md | 252 ++++++++++++++++++++++++++++++++---------------------- 1 file changed, 152 insertions(+), 100 deletions(-) diff --git a/README.md b/README.md index fa8da8809..8af98d449 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,8 @@ It features: - Suspense mode - Minimal API +...and a lot more. + With SWR, components will get **a stream of data updates constantly and automatically**. Thus, the UI will be always **fast** and **reactive**. ## Quick Start @@ -52,7 +54,7 @@ function Profile () { ``` In this example, the React Hook `useSWR` accepts a `key` and a `fetcher` function. -`key` is a unique identifier of the data, normally a URL of the API. And the `fetcher` accepts +`key` is a unique identifier of the request, normally the URL of the API. And the `fetcher` accepts `key` as its parameter and returns the data asynchronously. `useSWR` also returns 2 values: `data` and `error`. When the request (fetcher) is not yet finished, @@ -62,7 +64,7 @@ of `fetcher` and rerenders the component. Note that `fetcher` can be any asynchronous function, so you can use your favourite data-fetching library to handle that part. -We also have many other [demos and use cases](https://swr.now.sh) showing the power of SWR on the website. +Check out [swr.now.sh](https://swr.now.sh) for more demos of SWR. ## Usage @@ -81,74 +83,159 @@ npm install swr ### API ```js -const { - data, // data for the given key (or undefined) - error, // error (or undefined) - isValidating, // if the request is loading - revalidate // function to trigger a validate manually -} = useSWR( - key, // a unique key for the data (or a function, see below) - fetcher, // Promise returning function to load your data - swrOptions? = { - suspense: false, // enabled React Suspense mode - revalidateOnFocus: true, // auto revalidate when window gets focused - refreshWhenHidden: false, // refresh while the window is invisible - shouldRetryOnError: true, // retry when fetcher has an error - refreshInterval: 0, // polling interval (disabled by default) - errorRetryInterval: 5000, // error retry interval (10s on slow network) - focusThrottleInterval: 5000, // keep focus revalidate requests in a time window - dedupingInterval: 2000, // deduping requests - loadingTimeout: 3000, // timeout for triggering the onLoadingSlow event - - onLoadingSlow, // event handlers - onSuccess, - onError, - onErrorRetry, - - fetcher // default fetcher function - } -) +const { data, error, isValidating, revalidate } = useSWR(key, fetcher, options) ``` -#### `key` as a function +Example usage (call `fetcher('/api/user')` every 3 seconds): +```js +const { data, error } = useSWR('/api/user', fetcher, { refreshInterval: 3000 }) +``` -Pass a function as the `key` to `useSWR` to conditionally fetch data. If the functions throws an error or returns a falsy value, SWR will cancel the request. +#### Parameters -```js -// key returns a falsy value -const { data } = useSWR(() => shouldFetch ? '/api/data' : null, fetcher) +- `key`: a unique key string for the request (or a function / null) [(advanced usage)](#conditionally-fetch) +- `fetcher`: (_optional_) a Promise returning function to fetch your data [(details)](#data-fetching) +- `options`: (_optional_) options for this SWR hook -// key throws an error when user.id is not defined -const { data } = useSWR(() => '/api/data?uid=' + user.id, fetcher) -``` +#### 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 +- `revalidate`: function to trigger the validation manually + +#### Options + +- `suspense = false`: enabled React Suspense mode [(details)](#suspense-mode) +- `fetcher = undefined`: the default fetcher function +- `revalidateOnFocus = true`: auto revalidate when window gets focused +- `refreshInterval = 0`: polling interval (disabled by default) +- `refreshWhenHidden = false`: polling when the window is invisible (if `refreshInterval` is enabled) +- `shouldRetryOnError = true`: retry when fetcher has an error [(details)](#error-retries) + + +- `dedupingInterval = 2000`: deduping requests with the same key +- `focusThrottleInterval = 5000`: only revalidate once during a time span +- `loadingTimeout = 3000`: timeout to trigger the onLoadingSlow event +- `errorRetryInterval = 5000`: error retry interval [(details)](#error-retries) -### Global Configuration -A context to provide global configurations (`swrOptions`) for SWR. -In this example, all the SWRs will use the native `fetch` to load data as JSON, and refresh every 3 seconds. +- `onLoadingSlow`: callback function when a request takes too long to load (`loadingTimeout`) +- `onSuccess`: callback function when a request finishs successfully +- `onError`: callback function when a request returns an error +- `onErrorRetry`: handler for [error retry](#error-retries) + +When under a slow network (2G, <= 70Kbps), `errorRetryInterval` will be 10s, and +`loadingTimeout` will be 5s by default. + +You can also use [global configuration](#global-configuration) to provide default options. + +### Examples + +#### Global Configuration + +You can use `SWRConfig` to provide global configurations (`options`) for all SWR hooks. + +In this example, all `useSWR` hooks will use the same fetcher provided to load JSON data, and refresh every 3 seconds (except the user API): ```js import useSWR, { SWRConfig } from 'swr' -function Profile () { - const { data, error, isValidating } = useSWR('/api/user') +function Dashboard () { + const { data: events } = useSWR('/api/events') + const { data: projects } = useSWR('/api/projects') + const { data: user } = useSWR('/api/user', { refreshInterval: 0 }) // ... } function App () { return ( - fetch(...args).then(res => res.json()) - }}> - - ... + fetch(...args).then(res => res.json()) + }} + > + ) } ``` -### Manually Revalidate +#### Data Fetching + +`fetcher` is a function **accepts the `key`** of SWR, and returns a value or a Promise. +You can use any library you to handle data fetching, for example: + +```js +import fetch from 'unfetch' + +const fetcher = url => fetch(url).then(r => r.json()) + +function App () { + const { data } = useSWR('/api/data', fetcher) + // ... +} +``` + +Or using GraphQL: +```js +import { request } from 'graphql-request' + +const API = 'https://api.graph.cool/simple/v1/movies' +const fetcher = query => request(API, query) + +function App () { + const { data, error } = useSWR( + `{ + Movie(title: "Inception") { + releaseDate + actors { + name + } + } + }`, + fetcher + ) + // ... +} +``` + +Note that `fetcher` can be skipped from the parameters if it's provided gloablly. + +#### Conditional Fetching + +Use `null` or pass a function as the `key` to `useSWR` to conditionally fetch data. If the functions throws an error or returns a falsy value, SWR will cancel the request. + +```js +// conditionally fetch +const { data } = useSWR(shouldFetch ? '/api/data' : null, fetcher) + +// ...or return a falsy value +const { data } = useSWR(() => shouldFetch ? '/api/data' : null, fetcher) + +// ... or throw an error when user.id is not defined +const { data } = useSWR(() => '/api/data?uid=' + user.id, fetcher) +``` + +#### Dependent Fetching + +SWR also allows you to fetch data that depends on other data. It ensures the maximum possible parallelism (avoiding waterfalls), as well as serial fetching when a piece of dynamic data is required for the next data fetch to happen. + +```js +function MyProjects () { + const { data: user } = useSWR('/api/user') + const { data: projects } = useSWR(() => '/api/projects?uid=' + user.id) + // When passing a function, SWR will use the + // return value as `key`. If the function throws, + // SWR will know that some dependencies are not + // ready. In this case it is `user`. + + if (!projects) return 'loading...' + return 'You have ' + projects.length + ' projects' +} +``` + +#### Manually Revalidate You can broadcast a revalidation message to all SWR data inside any component by calling `trigger(key)`. @@ -177,7 +264,7 @@ function App () { } ``` -### Local Mutation +#### Local Mutation In many cases, applying local mutations to data is a good way to make changes feel faster — no need to wait for the remote source of data. @@ -206,11 +293,9 @@ function Profile () { } ``` -## Examples - -### Suspense Mode +#### Suspense Mode -You can enable the `suspense` option to use `useSWR` with React Suspense. +You can enable the `suspense` option to use SWR with React Suspense: ```js import { Suspense } from 'react' @@ -230,58 +315,25 @@ function App () { } ``` -### Subscription (e.g.: socket.io) - -You can use SWR with socket.io (generally any subscription pattern) like this: +Note in Suspense mode, `data` is always the fetch response (so you don't need to check if it's `undefined`). But if there's an error occurred, you need to use an [error boundary](https://reactjs.org/docs/concurrent-mode-suspense.html#handling-errors) to catch it. -```js -// fetch-data.js - -import { mutate } from 'swr' - -let latestData = null +#### Error Retries -// setup ws and broadcast to all SWRs -... -socket.on('data', data => { - latestData = data - mutate('/api/data', data, false) -}) - -export default () => latestData -``` +By default, SWR uses the [exponential backoff algorithm](https://en.wikipedia.org/wiki/Exponential_backoff) to handle error retries. +You can read more from the source code. -and your component: +It's also possible to override the behavior: ```js -import useSWR from 'swr' -import fetchData from './fetch-data' - -function App () { - const { data } = useSWR('/api/data', fetchData) - // ... -} -``` +useSWR(key, fetcher, { + onErrorRetry: (error, key, option, revalidate, { retryCount }) => { + if (retryCount >= 10) return + if (error.status === 404) return -### Dependent Fetching -SWR allows you to fetch data that depends on other data. It ensures the maximum possible parallelism (avoiding waterfalls), as well as serial fetching when a piece of dynamic data is required for the next data fetch to happen. - -```js -import useSWR from 'swr' - -function MyProjects () { - const { data: user } = useSWR('/api/user') - const { data: projects } = useSWR( - () => '/api/projects?uid=' + user.id - ) - // When passing a function, SWR will use the - // return value as `key`. If the function throws, - // SWR will know that some dependencies are not - // ready. In this case it is `user`. - - if (!projects) return 'loading...' - return 'You have ' + projects.length + ' projects' -} + // retry after 5 seconds + setTimeout(() => revalidate({ retryCount: retryCount + 1 }), 5000) + } +}) ``` ## Authors From 0beb19283b19362a14b8cd313f41b7c423d4037a Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Thu, 7 Nov 2019 08:36:55 +0800 Subject: [PATCH 06/11] modify titles --- README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 8af98d449..e316e4cbc 100644 --- a/README.md +++ b/README.md @@ -129,9 +129,9 @@ When under a slow network (2G, <= 70Kbps), `errorRetryInterval` will be 10s, and You can also use [global configuration](#global-configuration) to provide default options. -### Examples +## Examples -#### Global Configuration +### Global Configuration You can use `SWRConfig` to provide global configurations (`options`) for all SWR hooks. @@ -161,7 +161,7 @@ function App () { } ``` -#### Data Fetching +### Data Fetching `fetcher` is a function **accepts the `key`** of SWR, and returns a value or a Promise. You can use any library you to handle data fetching, for example: @@ -202,7 +202,7 @@ function App () { Note that `fetcher` can be skipped from the parameters if it's provided gloablly. -#### Conditional Fetching +### Conditional Fetching Use `null` or pass a function as the `key` to `useSWR` to conditionally fetch data. If the functions throws an error or returns a falsy value, SWR will cancel the request. @@ -217,7 +217,7 @@ const { data } = useSWR(() => shouldFetch ? '/api/data' : null, fetcher) const { data } = useSWR(() => '/api/data?uid=' + user.id, fetcher) ``` -#### Dependent Fetching +### Dependent Fetching SWR also allows you to fetch data that depends on other data. It ensures the maximum possible parallelism (avoiding waterfalls), as well as serial fetching when a piece of dynamic data is required for the next data fetch to happen. @@ -235,7 +235,7 @@ function MyProjects () { } ``` -#### Manually Revalidate +### Manually Revalidate You can broadcast a revalidation message to all SWR data inside any component by calling `trigger(key)`. @@ -264,7 +264,7 @@ function App () { } ``` -#### Local Mutation +### Local Mutation In many cases, applying local mutations to data is a good way to make changes feel faster — no need to wait for the remote source of data. @@ -293,7 +293,7 @@ function Profile () { } ``` -#### Suspense Mode +### Suspense Mode You can enable the `suspense` option to use SWR with React Suspense: @@ -317,7 +317,7 @@ function App () { Note in Suspense mode, `data` is always the fetch response (so you don't need to check if it's `undefined`). But if there's an error occurred, you need to use an [error boundary](https://reactjs.org/docs/concurrent-mode-suspense.html#handling-errors) to catch it. -#### Error Retries +### Error Retries By default, SWR uses the [exponential backoff algorithm](https://en.wikipedia.org/wiki/Exponential_backoff) to handle error retries. You can read more from the source code. From e4a4e261fa86f21ad5c6a0a0beb6f17556449653 Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Thu, 7 Nov 2019 08:39:54 +0800 Subject: [PATCH 07/11] adjust option list --- README.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/README.md b/README.md index e316e4cbc..a267400af 100644 --- a/README.md +++ b/README.md @@ -111,14 +111,10 @@ const { data, error } = useSWR('/api/user', fetcher, { refreshInterval: 3000 }) - `refreshInterval = 0`: polling interval (disabled by default) - `refreshWhenHidden = false`: polling when the window is invisible (if `refreshInterval` is enabled) - `shouldRetryOnError = true`: retry when fetcher has an error [(details)](#error-retries) - - - `dedupingInterval = 2000`: deduping requests with the same key - `focusThrottleInterval = 5000`: only revalidate once during a time span - `loadingTimeout = 3000`: timeout to trigger the onLoadingSlow event - `errorRetryInterval = 5000`: error retry interval [(details)](#error-retries) - - - `onLoadingSlow`: callback function when a request takes too long to load (`loadingTimeout`) - `onSuccess`: callback function when a request finishs successfully - `onError`: callback function when a request returns an error From 6fde30ee60429be142d0f2fa9de1775a2a1c8b2a Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Thu, 7 Nov 2019 08:42:41 +0800 Subject: [PATCH 08/11] add examples ToC --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index a267400af..0734ad7da 100644 --- a/README.md +++ b/README.md @@ -127,6 +127,15 @@ You can also use [global configuration](#global-configuration) to provide defaul ## Examples +- [Global Configuration](#global-configuration) +- [Data Fetching](#data-fetching) +- [Conditional Fetching](#conditional-fetching) +- [Dependent Fetching](#dependent-fetching) +- [Manually Revalidate](#manually-revalidate) +- [Local Mutation](#local-mutation) +- [Suspense Mode](#suspense-mode) +- [Error Retries](#error-retries) + ### Global Configuration You can use `SWRConfig` to provide global configurations (`options`) for all SWR hooks. From 84f90bfa8abfa46f7c13e11fe724fc0dbb1ae1df Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Thu, 7 Nov 2019 22:54:27 +0800 Subject: [PATCH 09/11] Update README.md --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0734ad7da..4b7d98a78 100644 --- a/README.md +++ b/README.md @@ -86,14 +86,15 @@ npm install swr const { data, error, isValidating, revalidate } = useSWR(key, fetcher, options) ``` -Example usage (call `fetcher('/api/user')` every 3 seconds): +Example usage: ```js const { data, error } = useSWR('/api/user', fetcher, { refreshInterval: 3000 }) ``` +which fetches data with `fetcher('/api/user')` every 3 seconds. #### Parameters -- `key`: a unique key string for the request (or a function / null) [(advanced usage)](#conditionally-fetch) +- `key`: a unique key string for the request (or a function / null) [(advanced usage)](#conditional-fetching) - `fetcher`: (_optional_) a Promise returning function to fetch your data [(details)](#data-fetching) - `options`: (_optional_) options for this SWR hook From a4d21f05067bbd7c754b7a043508493c255da316 Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Fri, 8 Nov 2019 03:05:52 +0800 Subject: [PATCH 10/11] Apply suggestions from code review Co-Authored-By: Paco <34928425+pacocoursey@users.noreply.github.com> --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 4b7d98a78..36c5497cb 100644 --- a/README.md +++ b/README.md @@ -96,7 +96,7 @@ which fetches data with `fetcher('/api/user')` every 3 seconds. - `key`: a unique key string for the request (or a function / null) [(advanced usage)](#conditional-fetching) - `fetcher`: (_optional_) a Promise returning function to fetch your data [(details)](#data-fetching) -- `options`: (_optional_) options for this SWR hook +- `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) @@ -106,13 +106,13 @@ which fetches data with `fetcher('/api/user')` every 3 seconds. #### Options -- `suspense = false`: enabled React Suspense mode [(details)](#suspense-mode) +- `suspense = false`: enable React Suspense mode [(details)](#suspense-mode) - `fetcher = undefined`: the default fetcher function - `revalidateOnFocus = true`: auto revalidate when window gets focused - `refreshInterval = 0`: polling interval (disabled by default) - `refreshWhenHidden = false`: polling when the window is invisible (if `refreshInterval` is enabled) - `shouldRetryOnError = true`: retry when fetcher has an error [(details)](#error-retries) -- `dedupingInterval = 2000`: deduping requests with the same key +- `dedupingInterval = 2000`: dedupe requests with the same key in this time span - `focusThrottleInterval = 5000`: only revalidate once during a time span - `loadingTimeout = 3000`: timeout to trigger the onLoadingSlow event - `errorRetryInterval = 5000`: error retry interval [(details)](#error-retries) From e292400c2cc87f7f31ac6e3112751d101a288660 Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Fri, 8 Nov 2019 03:07:43 +0800 Subject: [PATCH 11/11] Apply suggestions from code review --- README.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/README.md b/README.md index 36c5497cb..f2ef10c10 100644 --- a/README.md +++ b/README.md @@ -86,12 +86,6 @@ npm install swr const { data, error, isValidating, revalidate } = useSWR(key, fetcher, options) ``` -Example usage: -```js -const { data, error } = useSWR('/api/user', fetcher, { refreshInterval: 3000 }) -``` -which fetches data with `fetcher('/api/user')` every 3 seconds. - #### Parameters - `key`: a unique key string for the request (or a function / null) [(advanced usage)](#conditional-fetching)