重新验证
经由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
参数。