SWR@2.2.1在ReactNative中批量清除缓存无效问题求助

针对你遇到的退出登录后SWR缓存无法清除、新用户显示旧数据的问题，以下是几个经过验证的解决方法：

1. 直接清空SWR的缓存实例 #

SWR默认使用Map作为缓存容器，直接调用缓存实例的clear()方法可以一次性清空所有缓存，这是最直接有效的方式：

import { useSWRConfig } from 'swr';

const handleLogout = async () => {
  // 先执行退出登录的核心逻辑（比如清除本地token、用户信息）
  await auth.logout();

  // 获取SWR的缓存实例并清空
  const { cache } = useSWRConfig();
  if (cache instanceof Map) {
    cache.clear();
  }

  // 跳转到登录页面
  navigation.navigate('Login');
};

这个方法绕过了mutate的触发逻辑，直接操作底层缓存，能确保所有缓存key都被移除。

2. 检查并修正SWR的请求Key #

如果清空缓存后仍有旧数据残留，大概率是你的SWR请求Key没有包含用户唯一标识（比如用户ID、token哈希值）。当新用户登录时，请求Key和旧用户一致，SWR会直接读取缓存数据。

错误示例（无用户标识的Key）：

useSWR('/api/profile', fetcher);

正确示例（加入用户唯一标识）：

const currentUserId = getCurrentUserId(); // 从本地存储/状态中获取当前用户ID
useSWR(['/api/profile', currentUserId], fetcher);

即使缓存未完全清空，新用户的请求Key不同，也不会命中旧缓存，相当于双重保险。

3. 结合全局mutate兜底（针对特殊场景） #

如果上述方法仍不生效，可以在清空缓存后调用全局mutate，强制所有SWR Hook更新缓存状态。注意SWR@2.x的mutate参数格式是对象，而非直接传布尔值：

import { useSWRConfig } from 'swr';

const handleLogout = async () => {
  await auth.logout();

  const { cache, mutate } = useSWRConfig();
  if (cache instanceof Map) {
    cache.clear();
  }

  // 全局更新所有SWR缓存为undefined，且不触发重新请求
  await mutate('*', undefined, { revalidate: false });

  navigation.navigate('Login');
};

这里mutate('*', undefined, { revalidate: false })会遍历所有缓存Key，将对应的值设为undefined，同时禁止自动重新请求（因为已退出登录，无需再拉取数据）。

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