Unable to rerun failed queries when using react-router-dom

[ghost]

Hi,

I am using react-router-dom and useQuery with both suspense and useErrorBoundary set to true. However, despite taking a reset from useQueryErrorResetBoundary and executing it, I am unable to recover from the error state.

We have a CodeSandbox. I think the following will rerun the query, but it actually throws an error.

1. accessing "UsingErrorBoundaryPage" (which throws an error).
2. go to "SuccessPage".
3. go to "UsingErrorBoundaryPage" (thinks the query should be rerun, but it throws an error).

• QueryErrorReset with React Router

In CodeSandbox without react-router-dom below, the query is rerun in 3 above.

• QueryErrorReset without React Router

Am I using useQuery incorrectly?

[TkDodo]

not only do you need to reset the useErrorBoundary from react-query, you also need to reset the error boundary itself.

I've adapted the codesandbox to be more like the example from the docs:

https://codesandbox.io/s/queryerrorreset-with-react-router-forked-kdz6qu?file=/components/UsingErrorBoundaryPage.js

[ghost]

Thanks for your answer and adapted to codesandbox.

Since the ErrorBoundary is unmounted when the page transitions, I am thinking that a reset of the ErrorBoundary is not necessary.

I would like to rerun the query when I come back from a page transition without clicking "try again".
This is not possible when using react-router-dom.
And this is possible when we are not using react-router-dom.

[TkDodo]

okay, I narrowed it down some more. Every useQuery resets the error boundary reset in an effect 🙃 . This is necessary so that after clicking reset, future errors show up in the boundary again.

here is an example with an additional page that doesn't have a query: https://codesandbox.io/s/queryerrorreset-with-react-router-forked-kdz6qu?file=/index.js

• go to the error boundary error page, see the error
• don't click reset, but go to the page without query
• go again to the error boundary error page

-> you shouldn't see the error.

To work around this, you can use multiple <QueryErrorResetBoundary> instances, so that the queries don't influence each other.

https://react-query.tanstack.com//QueryErrorResetBoundary

without that, all calls to useQueryErrorResetBoundary just use the context default value.

[ghost]

I decided to click the "try again" button to re-fetch the data. Thank you very much!