Tanstack Query：如何重置相同query key下所有查询的错误？

在使用React Query结合Suspense和独立错误边界的场景中，要实现一处重试、两处同步刷新，核心是利用React Query相同Query Key共享缓存的特性，统一触发查询重取逻辑，而非让每个错误边界单独处理。

具体实现步骤 #

1. 统一重试逻辑：放弃让每个错误边界单独重置自身状态，改为通过QueryClient触发对应Query Key的全局重取。
2. 在错误边界中调用全局重试：每个错误边界的重试按钮，调用queryClient.refetchQueries()方法并指定目标Query Key。

代码示例 #

假设你的Query Key是['posts']，修改错误边界的重试逻辑如下：

import { useQueryClient } from '@tanstack/react-query';

// 在错误边界组件或其包裹的子组件中
const queryClient = useQueryClient();

const handleRetry = () => {
  // 重取指定Query Key的所有关联查询
  queryClient.refetchQueries({ queryKey: ['posts'] });
};

// 重试按钮渲染
<button onClick={handleRetry}>重试</button>

原理说明 #

React Query中，相同Query Key的查询会共享同一个缓存条目。当调用refetchQueries时，会重新执行对应的queryFn并更新缓存内容，所有使用该Query Key的组件（无论处于哪个错误边界下）都会自动感知缓存变化，重新发起查询并渲染，最终实现一处重试、两处同步刷新的效果。

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