Prevent error cleanup while query is being refetched

[lgenzelis]

I sometimes structure my components like this:

const { isLoading, error, data } = useQuery(['myQuery'], fetchSomething);

if (error) {
 return <ErrorInfo error={error} />
}
if (isLoading) {
 return <LoadingIndicator />
}
return <AnotherComponent data={data} />

Now, assume this scenario:

1. User enters website, sees LoadingIndicator and focuses another tab while site loads.
2. Query fails, so we render ErrorInfo.
3. User comes back to site tab, and when they try to interact with the site (e.g. to copy the error information), refetchOnWindowFocus kicks in. That means that: error automatically goes to null, and therefore we just show the LoadingIndicator

The part that I want to prevent here is "error automatically goes to null". Is there a way to do that? I mean, to keep the error information until the query actually resolves?

[TkDodo]

The thing is that the loading state means: I have nothing else to show (no data and no error). The logic happens here:

query/packages/query-core/src/query.ts

Lines 523 to 526 in 04945f3

	...(!state.dataUpdatedAt && {
	error: null,
	status: 'loading',
	}),

I think what helps in this case is to use error boundaries. The error boundary will not mount-and-retry the component unless it was explicitly re-set.

Otherwise, you an set refetchOnWindowFocus to a function and implement it to not refetch while you are in error state:

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

This might even be more what you want given that a user might copy the error, and while they are copying it the background refetch would resolve and remove the error in any case. So by just doing:

I mean, to keep the error information until the query actually resolves?

we would delay the problem, not solve it.

[lgenzelis]

Thanks @TkDodo ! I'm sorry, I wasn't clear. I'm not trying to prevent the query from being retried. If it is, and it is successful, I don't mind the error message going away. What I want is to be able to keep the error message until the query is successful (instead of dismissing it just because the query is refetching).

I came up with a possible solution, but I'm not sure I like it (you probably won't either, I know you're not a fan of useEffect 😅 )

function useQueryWithPersistedError(...params: Parameters<typeof useQuery>) {
  const [persistedError, setPersistedError] = useState<unknown>(null);
  const { status, isLoading, data, error } = useQuery(...params);

  useEffect(() => {
    if (status === 'success') {
      setPersistedError(null);
    } else if (error) {
      setPersistedError(error);
    }
  }, [error, status]);

  return { data, isLoading, error: persistedError };
}

[Kuirak]

Looks like you want to achieve the same as we did: #4305

There is already a PR adding this behavior: #4315

[lgenzelis]

Wow, so basically we both stumbled upon the same need... with a difference of 7 minutes between each other. What are the chances? 🤯 (or maybe this was a frequent request from users, in which case it would not be that surprising)

I'll wait before marking this as answered, until that PR is merged. :)