React Query中invalidateQueries提交后未更新数据问题排查

• 完全可以。React Query的缓存是全局绑定在当前QueryClientProvider对应的QueryClient实例上的，只要组件在同一个Provider作用域下，通过useQueryClient()拿到的是同一个实例，无论Announcements查询最初是在哪个组件发起的，任意组件调用queryClient.invalidateQueries("Announcements")都能正确标记对应缓存失效，触发列表重新拉取，和查询的发起位置无关。

你的代码核心问题是mutation执行函数没有正确处理异步请求的Promise，导致生命周期回调触发时机完全错误：

• 你定义的handleSubmitButtonNew是async函数，但内部执行api.createAnnouncements(data)时，既没有加await等待POST请求完成，也没有return这个请求的Promise对象。
• 这种写法会导致useMutation在发起POST请求后，立刻判定mutation执行成功，同步触发onSuccess回调。此时新增请求还没拿到后端成功响应，数据还没真正存入服务端，你此时调用invalidateQueries拉取到的自然是新增前的旧数据，表现为缓存刷新不生效。
• 这种写法还会导致额外问题：如果POST请求后续返回错误，useMutation完全感知不到失败状态，不会触发onError回调，错误会成为未捕获的Promise异常，也无法正常触发失败提示逻辑。

修正代码 #

只需要修改mutation的执行函数，保证useMutation能感知到异步请求的完成时机即可，两种写法等价：

// 写法1：async/await等待请求完成
const handleSubmitButtonNew = async (data) => {
  await api.createAnnouncements(data);
};

// 写法2：直接返回请求Promise
const handleSubmitButtonNew = (data) => {
  return api.createAnnouncements(data);
};

修正后，useMutation会等POST请求真正返回成功响应后，才会执行onSuccess里的缓存失效逻辑，此时拉取的列表就会包含最新新增的条目。

补充说明：如果你使用的是React Query v4及以上版本，官方推荐使用数组格式的query key（比如['Announcements']），但你当前使用字符串key只要查询和失效时的key完全一致，不会出现匹配问题，这不是本次故障的原因。

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