如何使用SWR仅对指定ID的资源执行mutate重新验证操作？

核心问题不是SWR不支持动态key，而是全局mutate需要和useSWR声明的缓存key完全严格匹配，动态ID场景下很容易出现两边key不一致的情况，而静态路径（比如/api/comments）不存在这个问题所以可以正常触发。

推荐解决方案（优先使用） #

用useSWR返回的绑定式mutate，不需要手动传key，天然和当前组件的缓存key绑定，完全避免匹配问题：

// 声明时取出绑定的mutate
const { data, mutate: mutateCurrentPost } = useSWR(`/api/post/${id}`, fetcher)

// 提交更新后直接调用，不需要传任何key
const handleUpdate = async () => {
  // 先执行你的POST提交更新逻辑
  await fetch(`/api/post/${id}`, {
    method: 'POST',
    body: JSON.stringify(formData)
  })
  // 直接触发当前文章的重新验证
  await mutateCurrentPost()
}

如果必须使用全局mutate #

要严格保证两个场景下的key完全一致：

• 保证调用mutate时使用的id和useSWR声明时的id是同一个值，避免作用域取值错误导致id不一致
• 如果你的useSWR用了数组格式的key（比如带额外参数的场景：useSWR(['/api/post', id], fetcher)），全局mutate也要传完全相同的数组，不能传字符串路径：

// 正确写法，和useSWR的key完全一致
mutate(['/api/post', id])
// 错误写法，匹配不到缓存
mutate(`/api/post/${id}`)

可选优化：强制触发重新验证 #

如果还是不生效，可以在调用mutate时显式指定配置强制重验：

// 第二个参数传undefined表示不手动更新缓存，强制走重新请求逻辑
mutate(`/api/post/${id}`, undefined, { revalidate: true })

如果需要更快的渲染效果，还可以用乐观更新，提交成功后直接把新数据传给mutate，不需要等重新请求返回：

const newPostData = { /* 你提交的最新文章内容 */ }
mutate(`/api/post/${id}`, newPostData, { revalidate: false })

内容的提问来源于stack exchange，提问作者user5345345