Errors should not be cached

[Mikilll94]

Describe the bug I have noticed that errors from useQuery hook are cached. IMO they should not be cached. They should be cleared when the component is remounted.

To Reproduce Steps to reproduce the behavior:

1. Download this simple Node.js project node-api.zip
2. Open it in VSCode and run:

   npm install
   node server.js

3. Download this simple React project react-query-test.zip
4. Open the new instance of VSCode and run:

   yarn
   yarn dev

5. Click on "Go to 8". Wait until the error "Person not found" will be visible
6. Click "Go back".
7. Click again on "Go to 8". The error "Person not found" is immediately visible (which means that it was cached).

Expected behavior Errors should not be cached. error variable should be cleared when the component remounts.

Desktop (please complete the following information):

• OS: macOS 11.2.3
• Browser: Chrome
• Version: 89.0.4389.114

Version of react-query: 3.13.4

Additional context Another solution is to provide some flag to the configuration, i.e. clearErrorsOnRemount

[TkDodo]

if an erroneous component re-mounts, it should be in isLoading state. You can safely ignore the error in this case and only show the error if you are in isError state.

[nghiepdev]

Hey, I'm having the same issue. We need to clear cache error when suspense: true.

@TkDodo You can see the problem in the example: https://codesandbox.io/s/busy-http-53kvh?file=/src/App.tsx

[TkDodo]

@nghiepit I don't understand that example. suspsense is set to false... can you explain the example with information about the issue is, what I need to click to reproduce the issue, how it behaves and how it should behave instead? Thanks

[nghiepdev]

@TkDodo I have been updated the example suspense to true. The problem is errors should be clear after the YourData component unmount.

Step1: Click the Toggle button: The Loading... visible and after 3s the <ErrorFallback /> will be replaced. Step2: Click the Toggle button: The <YourData /> will be unmounted. Step3 (Expected behavior): Click the Toggle button: Errors should be clear and the Loading... should be visible (repeat Step1).

The current behavior in step3: the <ErrorFallback /> appeared immediately.

[TkDodo]

@nghiepit I looked at the updated example. You need to tell react-query that it's now okay to start refetching by resetting the Error Boundary. This is described here: https://react-query.tanstack.com/reference/QueryErrorResetBoundary

I updated the example and it seems to work fine: https://codesandbox.io/s/stoic-drake-3gcn3?file=/src/App.tsx

You can also use the useQueryErrorResetBoundary hook instead, but you have to re-enable fetching somehow. Just unmounting is not enough I'm afraid. Of course, you can call the reset method in a useEffect that always triggers when visible is false in the example.

[nghiepdev]

@TkDodo Thank you for clarifying.