SWR中调用cache.delete无法清除缓存的问题求助

可能的原因及对应解决方案 #

1. 缓存键不匹配 #

SWR的缓存键是严格匹配的，如果你在useSWR中使用的是数组形式的键（比如带参数），但删除时只用了字符串路径，就会导致删除失败。

比如你的请求是：

useSWR(['/api/history', { userId: 123 }], fetcher)

那删除缓存时必须使用完全相同的键：

cache.delete(['/api/history', { userId: 123 }])

注意：对象作为键时，SWR是基于引用比较的，如果是不同对象实例，即使内容相同也会被视为不同键。可以把对象序列化为字符串作为键，比如：

const key = `/api/history?userId=${userId}`
useSWR(key, fetcher)
// 删除时用同一个字符串键
cache.delete(key)

2. 多SWRProvider导致缓存实例隔离 #

如果你的应用中存在多个SWRProvider，不同Provider下的组件会使用独立的缓存实例。你卸载组件时删除的是当前Provider的缓存，但发起请求的组件可能在另一个Provider下，导致缓存未被清理。

解决方法：确保所有涉及该API请求的组件都使用同一个全局SWRProvider，或者直接在全局Provider中获取缓存实例进行删除。

3. 时序问题：缓存读取早于删除操作 #

如果组件卸载后很快重新挂载，SWR可能在cache.delete执行完成前就读取了缓存。这种情况下，可以在新组件挂载时主动清理缓存，再发起请求：

const { cache, mutate } = useSWRConfig()

useEffect(() => {
  // 挂载时先删除缓存
  cache.delete('/api/history')
  // 强制触发请求（不使用缓存）
  mutate('/api/history', undefined, { revalidate: true, populateCache: false })
}, [cache, mutate])

// 或者在useSWR配置中强制跳过缓存
useSWR('/api/history', fetcher, {
  revalidateOnMount: true,
  // 禁用缓存读取，直接发起请求
  useCache: false
})

4. 验证缓存是否真的被删除 #

可以在删除后打印缓存内容，确认键是否被移除：

useEffect(() => {
  return () => {
    cache.delete('/api/history')
    // 打印所有缓存键，检查是否包含目标键
    console.log('当前缓存键：', Array.from(cache.keys()))
  }
}, [cache])

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