useIsError hook

[sarmong]

I think it would be a good idea to implement another method in QueryClient and a new hook.
They will act in the same way as useIsFetching and queryClient.isFetching -- returning the number of currently failed queries.

Why is this useful?

To have one point for all the error handling and showing one error screen for the whole application

[sarmong]

I opened a PR adding this - #2525

[TkDodo]

To have one point for all the error handling and showing one error screen for the whole application

If that's your goal, I think there are already two solutions to this problem:

1. useErrorBoundary

you don't need suspense to use error boundaries, you can use it to wrap a component tree in an error boundary and react-query will throw errors during the next render cycle so that you can handle all errors, including fetching errors, for that sub-tree in the error boundary.

2. onError callback on the query cache

The global callbacks are documented here: https://react-query.tanstack.com/reference/QueryCache. They are only called once per query, not per observer, and cannot be overwritten (as opposed to defaultOptions, which can be overwritten). You could use this to show error notifications, or even error screens on the level of the whole QueryClient.

Would either one of these solve your problem? I don't see much use for another hook that just gives you the number of erroneous queries, that doesn't seem very informative, because I won't even have access to the actual error message ....

[sarmong]

Sorry for late response. useErrorBoundary is what I needed, thank you. I will close the PR.

Regarding Suspence - I didn't try it yet. But won't it be using fallback also when the query is fetching in the background?

[sarmong]

@TkDodo , so Suspense is an experimental api and I wouldn't want to use it for production.

Would it make sense to make a hook useIsLoading that would work in a similar way as useIsFetching ?

[sarmong]

Or at least have isLoading key in queryClient.getQueryState

[TkDodo]

Or at least have isLoading key in queryClient.getQueryState

that function returns the state the query is in, which is:

'idle' | 'loading' | 'error' | 'success'

the isLoading etc boolean are just derived from that state.

[ggregoire]

useIsLoading would be a great quality of life addition!

(I just found that thread searching react-query global isLoading in google 😅)