清除SWR缓存的正确方法：两种mutate导入方式该选哪一个？

在执行官方推荐的全缓存清除代码时，两种mutate的使用场景和适配性有明确区别：

• 直接导入的mutate（import {mutate} from "swr"）：
  这是SWR提供的全局默认mutate函数，仅对默认SWR实例的缓存生效。如果你的项目没有自定义任何SWRConfig配置（比如统一fetcher、缓存策略），用它来清除全缓存完全没问题。但如果项目里存在多个SWR实例（或全局配置了SWRConfig），它只会操作默认实例的缓存，可能无法覆盖你自定义配置下的缓存内容。

• 从useSWRConfig()获取的mutate：
  这个mutate是绑定当前组件所在SWR上下文的函数，会自动适配你通过SWRConfig组件设置的全局/局部配置。不管项目有没有自定义实例，它都能准确操作当前上下文对应的全部缓存，不会出现缓存清除不彻底的情况。

场景建议 #

如果你的项目使用了SWRConfig做全局配置（比如统一设置请求方法、缓存过期时间），或者存在局部的SWR上下文，优先选择useSWRConfig()的方式。如果是简单的小项目，没有任何自定义配置，两种方式效果一致，任选其一即可。

代码示例 #

使用useSWRConfig()的写法

import { useSWRConfig } from 'swr';

function ClearAllCacheBtn() {
  const { mutate } = useSWRConfig();

  const clearCache = () => {
    mutate(
      key => true,
      undefined,
      { revalidate: false }
    );
  };

  return <button onClick={clearCache}>清除所有缓存</button>;
}

直接导入mutate的写法

import { mutate } from 'swr';

function ClearAllCacheBtn() {
  const clearCache = () => {
    mutate(
      key => true,
      undefined,
      { revalidate: false }
    );
  };

  return <button onClick={clearCache}>清除所有缓存</button>;
}

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