1

I'm trying to correctly handle query errors with Suspense and error boundaries in the situation where I have two parts of the app using the same query key.

They initially execute at the same time so they are batched with a single queryFn, which is nice, and that means that in case of an error, both trigger their own, serparate error boundary. Again, this is a good thing. What I would like is that when either one of those boundaries resets the error boundary to retry manually, the other one is also using the same retry.

I don't know if I'm clear enough so I've made a Codesandbox to expose the situation. In this example, there is a 50% chance for the queryFn to reject, which shows the two error boundaries separately. Now I would like that when the user clicks "retry" in the "Post titles" part, the corresponding content in "Post contents" part is also refreshed.

Thanks :)

Jeahel
  • 1,012
  • 2
  • 13
  • 30

1 Answers1

0

that's an interesting question. I don't think it is possible, but it's also not react-query related, per se.

If you use the same component in two different ErrorBoundaries, and that component throws, both boundaries need to be reset individually. That's exactly what's happening with react-query: RQ throws the fetch error during rendering so that the ErrorBoundary can pick it up.

If you don't want that, I think you'd need to consolidate into a single ErrorBoundary that spans over both components in question.

TkDodo
  • 20,449
  • 3
  • 50
  • 65