reactjs Tansack查询:如何用同一个键重置所有查询的错误?

w8biq8rn  于 2023-04-20  发布在  React
关注(0)|答案(1)|浏览(141)

我试图在应用程序的两个部分使用相同的查询键的情况下,使用Suspense和错误边界来正确处理查询错误。
它们最初是同时执行的,所以它们是用一个queryFn进行批处理的,这很好,这意味着在出现错误的情况下,它们都会触发自己的、分离的错误边界。同样,这是一件好事。我希望的是,当其中一个边界重置错误边界以手动重试时,另一个边界也使用相同的重试。
我不知道我说的够不够清楚,所以我做了一个Codesandbox to expose the situation。在这个例子中,queryFn有50%的机会被拒绝,这两个错误边界分别显示。现在我想当用户在“Post titles”部分点击“retry”时,“Post contents”部分的相应内容也会被刷新。
Thanks:)

e4yzc0pl

e4yzc0pl1#

这是一个有趣问题,我认为这是不可能的,但它本身也与react-query无关。
如果在两个不同的ErrorBoundaries中使用相同的组件,并且该组件抛出,则两个边界都需要单独重置。这正是react-query所发生的情况:RQ在渲染期间抛出fetch错误,以便ErrorBoundary可以拾取它。
如果您不希望这样,我认为您需要合并成一个跨越两个组件的ErrorBoundary。

相关问题