Prevent refetchOnMount if the loader / clientLoader prefetched an error

[GitonioDev]

Hello guys im on remix with react query and i want that if the clientLoader prefetches an errored query the query inside the component will not refetchOnMount, this only happens if i had a query with data, it directly refetches it after the clientLoader just prefetched an error, if i set refetchOnMount conditionally to false then it does work -> it will not refetch, but then any behavoir that comes from refetchOnMount is gone like if an error boundary is reset or something the query wont refetch automatically. So here is a showcase:

queryKey: "checkout-session" -> clientLoader (prefetchQuery) -> query.state.error.status = 400 -> useQuery mounts refetchOnMount triggers because data was not updated by the prefetchQuery and data is considered stale: double fetch on error

[TkDodo]

• refetchOnMount can be a function that you implement depending on data / error.
• if the clientLoader fails (and the promise is rejected and thrown, e.g. when using ensureQueryData), shouldn’t it show the error boundary immediately instead of showing the component?

[GitonioDev]

Yes but I don't want that I want to handle the error locally without an boundary so the clientLoader does not throw an error, so the only option is setting refetchOnMount to false if there is an error right? But this then would avoid refetching on mount if the query is used without an clientLoader, so I just want to avoid that initially so have some kind of staleness of the error, if the error is fresh for 1 second then don't refetch on mount and then the refetching later will work because the error is stale

[GitonioDev]

See here can this be an solution to that? this also adds some kind of debounce delay to avoid that if the user spams a button that mounts / unmounts a component would refetch rapidly

refetchOnMount: (query) => {
    // Check if the query.errorUpdatedAt is fresh for 1 second then dont refetch on mount
    // this means also that a loader / clientLoader that just put a error in the cache will not
    // cause an immediate refetch on mount if the query had data before, because refetchOnMount doesnt
    // run if the query had no data before
    if (Date.now() - query.state.errorUpdatedAt < 1000) {
        return false;
    }
    return true;
},

Update: this actually fixes my problem, but is this the right approach? I can't find a different way achieving the same thing as soon as I disable refetch on mount based on the error then for the whole time it will never refetch again

[GitonioDev]

So basically errorStaleTime would be great to have in that case because to avoid loaders double fetched I need to increase staleTime and now the same for errors I need a errorStaleTime to be increased to avoid that errors are double fetched, but I would understand if this will not be a feature because this is the only use case I could think of, maybe one more use case would be that error fetches cannot be spammed?

[TkDodo]

so the only option is setting refetchOnMount to false if there is an error right

refechOnMount: (query) => query.state.status !== 'error'

But this then would avoid refetching on mount if the query is used without an clientLoader

Only if the query gets into error state without a clientLoader, given the above implementation. The question is why you’d want your component to behave differently depending on where the errors comes from (loader or not)

this actually fixes my problem, but is this the right approach?

yeah that’s kind of a manual implementation of errorStaleTime, which does’t exist. But note that other triggers like refetchOnWindowFocus etc. do not respect that obviously.