使用 SWR 进行变更与乐观更新

来自 swr 的全局 mutate 函数可以让您从应用中的任意位置触发任意缓存键的重新验证：mutate('/api/user') 会使所有 useSWR('/api/user') 钩子重新获取数据。

请使用以下方式导入：import { mutate } from 'swr'。当服务器操作发生在组件之外，且该组件无法直接访问绑定的 mutate 时，这对于使数据失效非常有用。

将数据作为 mutate 的第二个参数传入：mutate('/api/user', updatedUser) 会立即将缓存设置为 updatedUser，而不会发出网络请求。这有时称为本地变更。

将 { revalidate: false } 作为第三个参数传入，可以防止 SWR 在乐观更新后重新获取数据。

useSWRMutation 专为用户发起的变更操作（表单提交、按钮点击）而设计，与自动获取相对。它不会在挂载时运行，而只会在您调用 trigger() 时运行。

请从 swr/mutation 导入：const { trigger, isMutating, data, error } = useSWRMutation('/api/post', sendRequest)。

useSWRMutation 的 fetcher 会接收 (key, { arg })，其中 arg 是传递给 trigger() 的值。示例：async (url, { arg: newPost }) => fetch(url, { method: 'POST', body: JSON.stringify(newPost) }).

请调用 trigger({ title: 'New Post', content: '...' })，以携带帖子数据作为 arg 执行变更操作。

useSWRMutation 返回的 isMutating 在变更请求进行期间为 true。您可以利用它在请求期间禁用提交按钮并显示加载指示器，从而防止重复提交。

这取代了您原本需要使用 useState 管理的 isSubmitting 状态变量。

乐观更新会在服务器确认变更之前，立即将预期结果应用到用户界面。如果服务器处理成功，则无需进一步操作；如果失败，则会将更新回滚到之前的状态。

这种模式能让用户界面感觉即时响应：点赞按钮无需等待 POST 响应，就会立即显示为已点击。

请使用 mutate(key, newData, { optimisticData: optimisticValue, rollbackOnError: true })。SWR 会立即将缓存设置为 optimisticValue，发送重新验证请求；如果请求抛出异常，则回滚到之前的值。

rollbackOnError: true 选项对于确保正确性至关重要：没有它，失败的变更会让过时的乐观数据留在缓存中。

设置 rollbackOnError: true 后，如果变更被拒绝，SWR 会自动将缓存恢复为乐观更新之前所保存的快照。您无需编写手动回滚代码。

此外，如果变更响应正文的结构与 useSWR 数据的结构不匹配，请设置 populateCache: false，以防止响应错误地更新缓存。

useSWR 会返回一个绑定的 mutate：const { data, mutate } = useSWR('/api/user', fetcher)。这个绑定的 mutate 会自动针对 '/api/user' 键，因此您无需再次传入该键。

请在负责显示数据的组件中使用绑定的 mutate。当您需要从无关的组件或工具函数中使某个键失效时，请使用来自 swr 的全局 mutate。

React Query 的 useMutation 也采用了类似的 trigger/isMutating 模式。主要区别在于：React Query 使用带有 queryClient.invalidateQueries 的 onSuccess 回调来惯用地使缓存失效，而 SWR 直接使用 mutate 函数更新缓存。

两者都支持乐观更新和回滚，但 API 结构不同。熟悉其中一个的团队可以很快学会另一个。

变更成功后有三种选择：调用 mutate(key) 重新获取数据；使用响应正文更新缓存（如果 API 返回了更新后的资源）；或者将乐观更新与重新验证结合起来。

对于列表变更（例如添加项目），请手动将新项目追加到缓存中，然后重新验证以确认服务端状态。这样无需完整重新获取列表，同时还能保持数据一致。

在 SWR 的 mutate 中必须设置哪个选项，才能在出错时自动还原乐观更新？

全局 mutate(key) 会触发重新验证；mutate(key, data) 会更新缓存而不重新获取数据。useSWRMutation 通过 trigger()、isMutating 状态和 extraArg 支持，处理由用户明确触发的变更。使用 optimisticData 和 rollbackOnError: true 的乐观更新，能让用户界面感觉即时响应，并自动从错误中恢复。

useSWR 返回的绑定 mutate 会针对其自身的键；来自 swr 的全局 mutate 则可以在任何位置使用。