Don't refetch if previous request failed

[mikelerch]

Hey, there might be an obvious answer to this, but it's my first time using react-query, so I figured I'd ask :p

Here's what I'm trying to achieve:
When the page is loaded for the first time, I attempt to retrieve the signed in users details (such as id, email, name, etc) by performing a request to my API with the useQuery hook.
This works perfectly fine when a user is signed in and the response is stored in a queryKey called user, containing all the desired details.

However, I'm running into issues if a user isn't actually signed in, meaning the initial request to retrieve their details fails. Since the user key isn't set, other components which also have the same useQuery hook will perform a request again to retrieve the details, which will obviously fail again and again, whenever they are mounted, until the user actually signs in.

Basically my question is the following; is there a built in way to specify that a useQuery hook should not be run if a previous attempt failed? I am aware of retry: false, refetchOnWindowFocus: false, refetchOnMount: false, however these are only relevant if a key is actually set and contains data.

If there isn't something supported out of the box, I assume I will have to keep track of whether the initial attempt failed in a different matter, using a Context in React or some other global state and set enabled: false on the useQuery hook manually if a user isn't signed in or the initial request failed.

Thanks in advance!

---

I guess this is somewhat a duplicate of #4512, although specifically for failed requests, but I'd still be curious what your proposed solution would look like.

[mikelerch]

I tried the alternative solution I mentioned above, which seems to work. Essentially what I'm doing now is only enabling the userQuery that fetches the users details whenever there actually is an authenticated user and their details can be retrieved.

I did however run into another problem, which is the following:
When the user signs in for the first time, I have a useMutation, which sends a post requests and afterwards does queryClient.setQueryData(['user'], () => data);. This way, I can avoid an unnecessary API call, because everything needed is already part of the sign in response.

However, when I set enabled: true on the useQuery hook afterwards, which should refetch the users details in the future, it does an API call right away. I guess this is intended behaviour as described in the docs. What I do now is set staleTime: Infinity, which prevents execution after enabled is set to true.

Is there a better way of solving this, because refetchOnMount is essentially not working anymore this way.

Thanks again and apologies for the long post.

[TkDodo]

retryOnMount can do this. from the docs:

retryOnMount: boolean
If set to false, the query will not be retried on mount if it contains an error. Defaults to true.

But, I would generally look at a different app setup, because if you do this, the queries will still be in error state. On approach would be to separate into authenticated an non-authenticated app and just render different components:

const userQuery = useQuery(...)

if (userQuery.isLoading) return 'loading ...'

if (userQuery.data) return <AuthenticatedApp />

return <NonAuthenticatedApp />

[mikelerch]

Looks like I missed that one, thanks a lot. That does indeed solve my problem, but I also see your point about structuring it in a different way, so it wouldn't cause it to retry in the first place. I will think about it 👍