Unexpected useQuery behavior
I've been using this excellent library for quite some time, and today I encountered an unexpected behavior.
In my React application, I have a modal window that is rendered conditionally like this:
{isOpen && <Modal />}
Inside the <Modal /> component, I call a useQuery hook with the following options:
useQuery({
queryKey: ['some_string', someId],
queryFn,
staleTime: Infinity,
retryOnMount: true,
throwOnError: false,
});
Here’s the situation:
queryFn throws an error (e.g. HTTP 500).
throwOnError: false ensures the error doesn't propagate to the ErrorBoundary.
The query fails and goes into the error state.
The data is undefined.
Now, when I close the modal and open it again (causing the component to remount), I expect the query to re-run because:
retryOnMount is true
status === 'error'
and data === undefined
However, no request is triggered on remount, even though the query is still in an error state and no data is available.
The query key remains the same: ['some_string', someId].
The only way to make the request fire again is to manually reset the query’s error state in QueryCache.
Is this intended?
Digging into the source code of TanStack Query, it seems that shouldFetchOnMount logic technically allows a refetch in this case when retryOnMount is true, but in practice it doesn't happen.
This behavior was unexpected to me, especially given that:
data is undefined
status is error
and the query is being remounted
It feels like this scenario should trigger a re-fetch automatically.
Am I missing something?
Thanks in advance,
Andrii.
In my React application, I have a modal window that is rendered conditionally like this:
{isOpen && <Modal />}
Inside the <Modal /> component, I call a useQuery hook with the following options:
useQuery({
queryKey: ['some_string', someId],
queryFn,
staleTime: Infinity,
retryOnMount: true,
throwOnError: false,
});
Here’s the situation:
queryFn throws an error (e.g. HTTP 500).
throwOnError: false ensures the error doesn't propagate to the ErrorBoundary.
The query fails and goes into the error state.
The data is undefined.
Now, when I close the modal and open it again (causing the component to remount), I expect the query to re-run because:
retryOnMount is true
status === 'error'
and data === undefined
However, no request is triggered on remount, even though the query is still in an error state and no data is available.
The query key remains the same: ['some_string', someId].
The only way to make the request fire again is to manually reset the query’s error state in QueryCache.
Is this intended?
Digging into the source code of TanStack Query, it seems that shouldFetchOnMount logic technically allows a refetch in this case when retryOnMount is true, but in practice it doesn't happen.
This behavior was unexpected to me, especially given that:
data is undefined
status is error
and the query is being remounted
It feels like this scenario should trigger a re-fetch automatically.
Am I missing something?
Thanks in advance,
Andrii.
