React Query useQueryErrorResetBoundary嵌套错误边界重置失效问题

当错误从ApiErrorFallback冒泡到GlobalErrorFallback后，点击重置按钮无法重置['errorQuery']查询，核心原因是QueryErrorResetBoundary的作用域不匹配：

• MainPage组件内创建了独立的QueryErrorResetBoundary，它的reset方法仅能重置该边界上下文内的查询。
• 当ApiErrorFallback抛出错误，错误绕过MainPage的ErrorBoundary直接到全局层级，此时GlobalErrorBoundary调用的是App组件内的reset方法，这个方法无法影响MainPage边界下的['errorQuery']查询。

同时，重置后未显示加载骨架，是因为查询没有被正确触发重新请求，自然不会触发Suspense的fallback。

解决方案一：统一使用全局QueryErrorResetBoundary #

将所有查询纳入全局的QueryErrorResetBoundary上下文，确保上层重置能覆盖所有查询：

修改App组件 #

const App = () => {
  const queryErrorResetBoundary = useQueryErrorResetBoundary();
  const location = useLocation();

  return (
    <QueryErrorResetBoundary>
      <ErrorBoundary
        key={location.pathname}
        onReset={() => queryErrorResetBoundary.reset()}
        fallbackRender={GlobalErrorFallback}
      >
        <Suspense fallback={<SuspenseFallback />}>
          <Router />
        </Suspense>
      </ErrorBoundary>
    </QueryErrorResetBoundary>
  );
};

修改MainPage组件 #

移除独立的QueryErrorResetBoundary，复用全局上下文：

const MainPage = () => {
  const location = useLocation();
  const queryErrorResetBoundary = useQueryErrorResetBoundary();

  return (
    <ErrorBoundary
      key={location.pathname}
      onReset={() => queryErrorResetBoundary.reset()}
      fallbackRender={ApiErrorFallback}
    >
      <Suspense fallback={<Skeleton />}>
        <ComponentThatWillThrowError />
      </Suspense>
    </ErrorBoundary>
  );
};

解决方案二：在GlobalErrorFallback中直接操作QueryClient #

如果需要更精准地重置特定查询，可以直接调用QueryClient的resetQueries方法，确保目标查询被重置并重新发起请求：

修改GlobalErrorFallback组件 #

const GlobalErrorFallback = ({ error, resetErrorBoundary }) => {
  const queryClient = useQueryClient();
  
  const handleReset = () => {
    // 重置目标查询
    queryClient.resetQueries(['errorQuery']);
    // 重置错误边界状态
    resetErrorBoundary();
  };

  return (
    <>
      <h1>Something went wrong</h1>
      <button onClick={handleReset}>Try Again</button>
    </>
  );
};

这种方式适合需要针对特定查询重置的场景，避免全局重置影响其他查询。

验证效果 #

修改后，点击GlobalErrorFallback的"Try Again"按钮：

1. 目标查询['errorQuery']会被重置并重新发起请求
2. 由于suspense: true，请求过程中会触发Suspense的fallback，显示加载骨架
3. 请求成功后展示查询结果

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