重新验证

经由SWR管理的请求数据,除了可以通过轮询等方法获得更新以外,还可以通过SWR提供的mutate函数来通知SWR执行强制重新验证(数据刷新)操作,这个重新验证可以使所有使用指定key的组件和模块都发生刷新。mutate函数是SWR提供的一个全局函数,最简单的使用方法是传递要重新刷新的key进去。

例如以下这种常见的登出操作。

import useSWR, { mutate } from 'swr';

function NavBar() {
  return (
    <div>
      <Avatar />
      <button
        onClick={() => {
          revokeToken();
          mutate('/api/usr');
        }}>
        Logout
      </button>
    </div>
  );
}

mutate提供第二个参数还可以使本地缓存的数据立刻发生变化。例如mutate('/api/usr', { ...data, name: newUserName }, false),在这个简单的示例中,第三个参数关闭了mutate执行远程重新验证的功能,而将数据更新仅限制在了本地。

另外,还可以在mutate函数中传递一个返回Promise的函数,来对重新验证进行额外定义并返回更新后的数据。例如以下示例。

mutate(`/api/orders`, async orders => {
  // 更新一个项目的内容,并获得更新以后的数据
  const updatedOrder = await fetch(`/api/order/${orderId}`, {
    method: 'PATCH',
    body: JSON.stringify({ flag: 3 })
  });

  const filteredOrders = orders.filter(order => order.id !== orderId);
  return [...filteredOrders, updatedOrder];
});

useSWR Hook返回的mutate函数的功能与SWR提供的全局mutate功能是一致的,但在使用时并不需要提供key参数。