React Query cache存储位置及是否支持自定义存储配置

默认存储逻辑 #

React Query（现名TanStack Query）的缓存默认存放在当前页面的JavaScript运行时内存中，本质是QueryClient实例内部维护的一个普通JavaScript对象：

• 缓存里不仅存接口返回的业务数据，还会存每个查询对应的状态元数据，比如上次更新时间、过期时间、加载状态、重试次数等信息。
• 这种内存缓存和当前页面的JS上下文强绑定，刷新页面、关闭标签页、销毁QueryClient实例时，缓存会被直接清空，默认没有往localStorage、IndexedDB这类本地持久化介质写数据的逻辑。

是否支持自定义存储位置 #

开发者完全可以自主决定缓存的存储位置，框架本身预留了完整的扩展能力：

• 做持久化缓存场景时，只要你提供的存储介质实现了标准的getItem、setItem、removeItem接口，就可以接入作为缓存存储，常见选择包括浏览器端的localStorage、sessionStorage、IndexedDB，Electron场景的本地文件存储，小程序端的本地缓存API等都可以适配。
• SSR服务端渲染场景下，你可以把缓存绑定到单次请求的上下文对象上，避免多用户请求之间的缓存串扰。
• 即使不做持久化，你也可以通过QueryClient的配置项自定义内存缓存的管理规则，比如调整缓存垃圾回收的等待时间、按业务模块划分缓存分区等。

提示：如果选择明文存储类的持久化介质（比如localStorage），不要把敏感用户数据存在缓存中，避免安全风险。

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