Errored queries caught by ErrorBoundary are not retried on mount

[tobias-tengler]

Describe the bug
I'm using Suspense and ErrorBoundaries and I'm seeing unexpected behavior when queries are erroring. If a query errors I'm displaying an ErrorBoundary for that part of the UI. Now if I navigate to another page using react-router-dom and navigate back to the page, the ErrorBoundary is still there and the query is not retried. I know that normally you would have to reset the error boundary while you are on the same page to trigger a re-run of the failed queries, but in this case I would've assumed that the queries are retried when I visit the page again, i.e. the components are mounted again.

To Reproduce

1. Visit the Code Sandbox
2. Open the console
3. Wait until the error occurs and the fallback of the ErrorBoundary is shown: "An error occured!" (You need to click off of react-error-overlay to see it)
4. Press the "Hide" button to unmount the ErrorBoundary
5. Press the "Show" button to render it again
6. Query is not re-executed and the error is immediately shown again

Expected behavior
The query is re-executed after the component mounts, i.e. honoring the retryOnMount setting.

Desktop (please complete the following information):

• Version: 3.24.4

[TkDodo]

The docs say:

Whether you are using suspense or useErrorBoundaries in your queries, you will need a way to let queries know that you want to try again when re-rendering after some error occurred.

So I think in your scenario, utilizing useQueryErrorResetBoundary when the ErrorBoundary unmounts should work. Here is a working sandbox: https://codesandbox.io/s/naughty-nash-7jixq?file=/src/App.tsx

[tobias-tengler]

Thank you for the quick response @TkDodo !
I sort of got it working as you described, but in my actual application (not the example) the useQueryErrorResetBoundary doesn't work. I have to additionally reset the queries to actually trigger a proper refresh. Any thoughts/ideas what could be happening?

Code is looking like this:

export function useResetReactQuery() {
    const { reset } = useQueryErrorResetBoundary();
    const queryClient = useQueryClient();

    const resetReactQuery = useCallback(async () => {
        reset();
        // await queryClient.resetQueries();
    }, [queryClient, reset]);

    return resetReactQuery;
}

export function useResetErrorBoundaryOnUnmount() {
    const reset = useResetReactQuery();

    useEffect(() => {
        return () => {
            reset();
        };
    }, [reset]);
}

export function ErrorFallback() {
    useResetErrorBoundaryOnUnmount();

    return <div>Fallback</div>;
}

// ...
<ErrorBoundary fallback={<ErrorFallback />}>
  <Suspense fallback={<LoadingSpinner centered />}>
    <Information /> // this is the component using useQuery
  </Suspense>
</ErrorBoundary>

Closing the issue, since you've answered my initial question.

[codebutler]

Hi @TkDodo @tannerlinsley,

I think this issue was closed too soon.

The example above from @TkDodo only works because the "hide" state does not also have a query. This is probably why @tobias-tengler was still seeing the issue in their real application.

Here is a modified example that shows the issue: https://codesandbox.io/s/nice-banach-x79q4r
Press "Toggle" a few times and you'll see that the failed query is never retried. If you comment out the useQuery hook in ComponentWithQuery2 then you'll see the first query is retried as expected.

What seems to be happening:

1. On unmount, query1 calls reset() which sets the isReset flag.
2. On mount, query2 immediately resets the flag. If there is no query2 the flag remains set and query1 will be retried.

This inconsistency feels unintuitive, was it intentional? What is the proper workaround?

Thanks.

[TkDodo]

yeah, this is weird. I was thinking that with two ErrorBoundaries, you would also need two reset contexts, like I've done here:

https://codesandbox.io/s/sparkling-bird-4t4zoq?file=/src/App.tsx

But it still doesn't work, not sure ...

[codebutler]

Thanks for taking another look at this!

I think you would need to put different keys on each QueryErrorResetBoundary in your updated example for react to create a new instance when toggling states. However, that still doesn't fix the problem: https://codesandbox.io/s/suspicious-grass-juez4e

Calling reset() only toggles that flag, it doesn't invalidate any cache or trigger a render. The query has already been unmounted at this point, so it never had an opportunity to notice that the flag changed.

[TkDodo]

yeah that makes sense - but it's still not working, is it? I don't really see why that is, because the scopes should be completely isolated by react context ...

something is off here because even if I remove query2 and the second error boundary completely, it still doesn't work:

https://codesandbox.io/s/suspicious-wilson-reie3j?file=/src/App.tsx

I'm using error boundaries as well and I don't have such a problem, but I'm also using an explicit button to trigger the reset. I think the error boundary is just never reset 🤔

[codebutler]

https://codesandbox.io/s/suspicious-wilson-reie3j?file=/src/App.tsx

You have a typo in here:

- const reset = useQueryErrorResetBoundary();
+ const { reset } = useQueryErrorResetBoundary();

...but that also doesn't fix the problem unless you also remove the QueryErrorResetBoundary completely. 🤔

[TkDodo]

yeah sorry, that was stupid. some more attempts happening here:

https://codesandbox.io/s/blue-haze-ijtqt1?file=/src/App.tsx

it seems that we cannot react to an errorBoundary unmounting? I have tried resetKeys and onResetKeysChange as per the docs, as setting the resetKeys to something static is not working.

I think this is also why it works with explicit reset buttons: because we then really call reset. You can see in this latest example that even though I'm using resetKeys, onResetKeysChange for number 1 is never called

[codebutler]

If I'm reading this correctly, onResetKeysChange is not triggered if you go from no error to having an error. If you change query2 to also fail, both onResetKeysChange are called as expected.

[codebutler]

In your example onResetKeysChanged is called during the transition from error to no error, which is when we want to invalidate the query.

If within onResetKeysChanged you call queryClient.clear() instead of reset() the query re-runs as expected. So the problem isn't reset not being called, but that it doesn't have the desired effect.

[TkDodo]

so as discussed here, it seems that resetKeys / onResetKeysChanged is not good enough:

• Query errors not being reset #3485 (comment)

having an effect that that listens to whatever the reset keys are and reset the boundary should work, but I can't get it to work :/

https://codesandbox.io/s/sharp-surf-2uu0kd?file=/src/App.tsx

[codebutler]

so as discussed here, it seems that resetKeys / onResetKeysChanged is not good enough:

• Query errors not being reset #3485 (comment)

having an effect that that listens to whatever the reset keys are and reset the boundary should work, but I can't get it to work :/

https://codesandbox.io/s/sharp-surf-2uu0kd?file=/src/App.tsx

If you add a console.log statement inside ComponentWithQuery before useQuery, it prints when you toggle back to the error state. Doesn't this mean the ErrorBoundary is being reset correctly but the query is immediately re-throwing?

function ComponentWithQuery() {
+  console.log("query!"); // would not see this if the ErrorBoundary did not reset 
   const { data } = useQuery(

The output is:

query! 
The above error occurred in the <ComponentWithQuery> component:
resetting nr 2

so the reset is happening after the query.

[TkDodo]

looked into this again today because we're also facing it now, here is an altered example that seems to work:

• https://codesandbox.io/s/quiet-feather-qi8x4e?file=/src/App.tsx

changes I made:

• use FallbackComponent instead of fallback
• in the unmount useEffect, we have the reset both the errorBoundary from react-error-boundary as well as the one from react-query.

One problem that remains is that each component needs to have its own "instance" of ErrorFallback, because otherwise, the component merely re-renders and never unmounts, so the effect doesn't run.

If we want to use the same FallbackComponent, we have to use resetKeys, as this example shows:

• https://codesandbox.io/s/determined-raman-pnl513?file=/src/App.tsx