What is the point of retryOnMount setting?

[chekrd]

I tried it enabled/disabled, with/without suspense and the query never retries on the mount, instead returns an error from the cache.

Example https://codesandbox.io/s/misty-forest-mljc1y?file=/src/App.js
Try to show and hide the component using the button. No fetch on remount is logged.

What am I doing wrong and how can an erroneous query be refetched on mount?

RQ 4.22.4

[louis-young]

Hi 👋

Essentially, what I think is happening here is that by enabling useErrorBoundary, you're communicating to TanStack Query that erroneous queries should throw an error that propagates to the nearest error boundary. This means that when you attempt to remount the component, it's still in an erroneous state and so it throws, explaining why you land back on the error boundary fallback without the query function having ran again. If you disable useErrorBoundary, it works as you'd expect.

I'm not a maintainer and I don't have enough knowledge of the internals to reason about this so I'll leave it to someone who knows more than me, but hopefully this offers some insight 🙂

[louis-young]

I think this might be an interesting one. Perhaps @TkDodo could shed some light when he has time?

[chekrd]

I can disable useErrorBoundary, but I cannot disable suspense mode. And with config:
suspense: true,
useErrorBoundary: false

mount still returns the error from the cache.

Well, this is really unexpected.

[chekrd]

I tried to hack it with custom ErrorBoundary:

const ResetQueryErrorBoundary = ({ children, fallbackRender }) => {
  const { reset } = useQueryErrorResetBoundary();

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

  return (
    <ErrorBoundary fallbackRender={fallbackRender}>{children}</ErrorBoundary>
  );
};

But if the query unmounts while suspended, the error is not going to reset and the next mount will return the error from the cache again. Modified example https://codesandbox.io/s/serene-meninsky-ppjzpb?file=/src/App.js

[chekrd]

Also, why the erroneous query is not refetched once it is mounted again and stale?

[TkDodo]

Also, why the erroneous query is not refetched once it is mounted again and stale?

Because the error boundary has not been reset. have you seen: https://tanstack.com/query/v4/docs/react/reference/QueryErrorResetBoundary

Here's a fork of your sandbox: https://codesandbox.io/s/unruffled-framework-g054et?file=/src/App.js

[chekrd]

@TkDodo Good point, thanks. When I swap useQuery for useQueries, the error reset does not work. I created a bug for this #4874

[TkDodo]

thanks. not sure when I can take a look. Do you want to? Quick glance at the code showed me that useQueries does everything the same as useQuery here. A failing test case might also be a good start

[chekrd]

Ok, I can give it a try.

[tamusil-cen55253]

Hello @TkDodo we have little bit different case and I do not how to solve it. Please can you help me? My codesandbox https://codesandbox.io/s/eloquent-black-ep5no7?file=/src/App.tsx. Just start on the "/offer" and wait until fallback shows. After that move to the "/" and after that move back to the "/offer". My expectation is that there will be retries on mount but fallback is shown immediately.

I already tried:

1. reset(); in onReset callback
2. reset(); in onClick callback on Link in fallback component
3. reset(); in OfferWithLoading component unmount
4. resetErrorBoundary(); in onClick on Link in fallback component
5. resetErrorBoundary(); and reset(); combinations
6. reset(); in onError callback

In our case, we cannot add an extra button to reset the state as you did in https://codesandbox.io/s/unruffled-framework-g054et?file=/src/App.js

[TkDodo]

you need to reset the errorBoundary somewhen. your boundary just shows a link, while the one in the docs resets the boundary when the user clicks try again.

So yes, reset onClick is needed, or, you can try resetting in an effect cleanup function, to have a reset when the component unmounts.