React Query查询失效跨标签页渗透的原因排查

这是TanStack Query（原React Query）的两个核心特性共同作用导致的：

• 同源localStorage共享：浏览器的localStorage按域名隔离，只要是同一域名（这里都是localhost），哪怕端口不同（6006/6007），所有标签页都会共享同一份localStorage数据。而TanStack Query默认用localStorage做缓存持久化和跨标签页同步。
• 跨标签页缓存状态监听：TanStack Query内置了跨标签页的缓存同步机制，会监听localStorage的变化。当你在一个标签页调用invalidateQueries(['some', 'keys'])时，会修改localStorage里对应查询的缓存状态标记；另一个标签页的Query实例检测到这个变化后，就会自动重新执行匹配该查询键的请求。

还有个关键细节：你两个标签页登录了不同用户，但查询键完全一致（都是['some', 'keys']），TanStack Query只会通过查询键识别缓存，不会自动区分用户会话。如果要避免这种情况，需要把用户唯一标识（比如用户ID）加入查询键，改成['some', 'keys', userId]，这样不同用户的缓存就会被分开，不会互相影响。

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