RTK Query：如何等待mutation触发的所有依赖查询完成后执行操作

当然可以实现这个需求，核心思路是让setMode的Promise在所有失效查询的重取请求完成后再resolve，而不是只等mutation自身的操作完成。

针对React Query场景（最常见的mutation+查询标签失效场景） #

如果你的项目基于React Query开发，直接修改setMode mutation的实现即可：

const setMode = useMutation(async (mode_name) => {
  // 先执行mode变更的核心业务逻辑
  await api.updateMode(mode_name);
  // 调用invalidateQueries并等待所有触发的重取请求完成
  await queryClient.invalidateQueries({ 
    queryKey: ['queryA', 'queryB'] // 替换成你实际的查询标签/键
  });
});

这样调用setMode(mode_name).then(start)时，start会在mutation完成+所有失效查询的重取请求都结束后才执行，完全不需要依赖不可靠的setTimeout。

自定义查询管理场景 #

如果是自己实现的查询缓存与失效逻辑，需要在setMode内部收集所有因标签失效触发的请求Promise，用Promise.all等待它们全部完成：

async function setMode(mode_name) {
  // 执行mode变更的API请求
  await fetch('/api/set-mode', { 
    method: 'POST', 
    body: JSON.stringify({ mode_name }) 
  });
  
  // 触发所有失效标签对应的查询，并收集请求Promise
  const refetchPromises = [];
  if (isQueryInvalidated('queryA')) {
    refetchPromises.push(refetchQueryA());
  }
  if (isQueryInvalidated('queryB')) {
    refetchPromises.push(refetchQueryB());
  }
  
  // 等待所有重取请求完成后再结束当前函数
  await Promise.all(refetchPromises);
}

之后调用setMode(mode_name).then(start)就能保证时序完全可靠。

核心逻辑就是不要让setMode的Promise提前结束，必须等所有关联的重取请求都完成后再resolve，这样then回调里的start就能按预期执行。

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