React Query 如何与 Suspense 集成？错误边界怎么处理？

React Query 接入 Suspense 后，加载状态交给 Suspense fallback，错误交给 Error Boundary。实际项目里优先用 useSuspenseQuery，而不是在每个组件里判断 isLoading。注意：开启 Suspense 不代表不用管错误，网络失败会抛给最近的错误边界；如果要让“重试”按钮生效，还要配 QueryErrorResetBoundary。

追问

useSuspenseQuery 和 useQuery 有什么区别？

useSuspenseQuery 成功返回时 data 一定有值，加载中会挂起组件。你少写了 loading 分支，但必须准备好 Suspense 和错误边界。

Error Boundary 应该放在哪里？

放在页面块级别通常最合适。太外层会导致整页白掉，太内层又会让错误处理重复。

有缓存时还会进入 fallback 吗？

已有可用缓存时通常直接渲染；queryKey 改变触发新请求时，可能再次 fallback。交互更新可用 startTransition 降低界面闪烁。

SSR 里能直接用吗？

要谨慎。Next.js 等场景通常配合预取、dehydrate/hydrate，或使用框架推荐的 Suspense 数据方案。

写段代码

tsx
<QueryErrorResetBoundary>
  {({ reset }) => (
    <ErrorBoundary onReset={reset} fallbackRender={({ resetErrorBoundary }) => (
      <button onClick={resetErrorBoundary}>重试</button>
    )}>
      <Suspense fallback={<Spinner />}>
        <UserPanel />
      </Suspense>
    </ErrorBoundary>
  )}
</QueryErrorResetBoundary>