配置

useSWR()的完整调用格式如下：

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

在之前的示例中，我们只从useSWR中获取了data和error两个返回值，在大部分情况下仅使用这两个返回值就已经能够满足数据获取的需要了。useSWR的所有返回值的功能如下：

data，通过fetcher用给定的key获取的数据，如果数据尚未完全加载，那么此项将返回undefined。
error，保存从fetcher中抛出的错误，如果没有错误抛出，那么这一项将是undefined。
isValidating，标识请求中是否有请求或者重新验证。
mutate(data?, shouldRevalidate?)，用于更改缓存数据的函数。

从以上说明中可以看出，前面示例中使用data和error判断数据是否加载完成是非常便利的方式。而在使用useSWR时，一般只需要传递前两个参数即可。useSWR的三个参数含义如下：

key，标识请求用的唯一字符串，也可以是function或者null。如果使用函数或者null作为key，那么当fetcher函数抛出错误或者返回false值的时候，SWR将不会再次发起请求。
fetcher，一个用于请求数据的返回Promise的函数。
options，用于配置SWR行为的配置对象。

SWR的很多高级功能都是通过options中的各种配置来实现的，以下是一些常用的配置项及其功能。

选项名	默认值	功能
`suspense`	`false`	启用React的Suspend功能。
`fetcher`		提供一个可以供所有的数据访问使用的`fetcher`函数。
`initiData`		设定要返回的初始数据。
`revalidateOnMount`		设定在组件挂载时是否启动自动验证。在没有设置`initialData`的时候，将会重新验证。
`revalidateOnFucus`	`true`	当窗口被聚焦的时候是否进行重新验证。
`revalidateOnReconnect`	`true`	当网络恢复连接的时候是否进行重新验证。
`refreshInterval`	`0`	设置轮询间隔，`0`表示关闭轮询。
`refreshWhenHidden`	`false`	当窗口不可见的时候是否继续保持轮询。
`refreshWhenOffline`	`false`	当网络离线的时候是否继续保持轮询。
`shouldRetryOnError`	`true`	当`fetcher`函数抛出错误的时候是否自动进行重试。
`dedupingInterval`	`2000`	在指定时间中使用相同`key`获取数据时，自动避免数据请求的时间限度。
`focusThrottleInterval`	`5000`	重新验证的时间间隔。
`loadingTimeout`	`3000`	超时触发`onLoadingSlow`事件的时间限度。
`errorRetryInterval`	`5000`	`fetcher`函数出现错误以后重试的时间间隔。
`errorRetryCount`		`fetcher`函数出现错误以后最大重试次数。
`onLoadingSlow(key, config)`		请求加载时间过长以后的回调函数。
`onSuccess(data, key, config)`		请求加载成功完成时执行的回调函数。
`onError(err, key, config)`		请求返回错误时执行的回调函数。
`onErrorRetry(err, key, config, revalidate, revalidateOptions)`		确定错误重试策略的处理函数。
`compare(a, b)`		用于检测返回的数据是否发生了更改，用于防止伪造重新渲染。

除了可以在使用useSWR的时候进行配置，SWR还支持为所有的SWR Hook提供全局配置。SWR的全局配置需要借用组件SWRConfig，例如以下是一个采用全局配置的示例。

import useSWR, { SWRConfig } from 'swr';

function Dashboard() {
  const { data: events } = useSWR('/api/events');
  const { data: users } = useSWR('/api/user', { refreshInterval: 0 });

  // 使用数据并返回UI
}

function App() {
  return (
    <SWRConfig value={{ refreshInterval: 3000 }}>
      <Dashboard />
    </SWRConfig>
  );
}

Live with React

配置