当全局wallet状态变更时，如何使react-query查询失效？

问题背景 #

你已经通过以下代码使用React Query获取用户数据：

const {data: userData, error: userError, status: userStatus} = useQuery(['user', wallet], context => getUserByWallet(context.queryKey[1]));

但尝试在wallet全局状态变更时手动失效查询的写法报错，因为在useEffect回调中调用了useQueryClient Hook（Hook不能嵌套调用）。你的核心需求是：钱包切换时自动重新获取对应用户的数据。

解决方案 #

方法一：利用QueryKey自动触发重新请求（推荐） #

React Query的核心机制就是根据QueryKey的变化自动识别新查询并重新发起请求。你当前的代码已经把wallet作为QueryKey的一部分（['user', wallet]），只要wallet的值发生变更，React Query会自动判定这是一个全新的查询，自动取消旧请求并发起新请求获取对应钱包的用户数据。这种方式不需要额外编写useEffect，是React Query的标准用法。

方法二：手动触发查询失效（适用于特殊场景） #

如果确实需要手动触发查询失效（比如全局状态变更时强制刷新所有相关缓存），正确的做法是在组件顶层获取QueryClient实例，再在useEffect中调用失效方法：

// 在组件顶层调用useQueryClient，不可在useEffect内部调用
const queryClient = useQueryClient();

useEffect(() => {
  // 当wallet变更时，失效所有key包含['user']的查询
  queryClient.invalidateQueries({ queryKey: ['user'] });
}, [wallet, queryClient]);

注意要将queryClient加入useEffect的依赖数组，保证依赖项的正确性。

内容的提问来源于stack exchange，提问作者Wesley van S