Error Handling in useQuery React Query Hook

Published on 28 Jul, 2021

useQuery hook handles promises in React Query. If the promise throws an error, the query object provides a isError property to detect that. The query object also provides an error property that contains the actual error object.

We can therefore handle loading, error and success cases like below:

return queryUsers.isLoading
  ? "Loading..."
  : queryUsers.isError
  ? queryUsers.error.message
  : "Success";

Here queryUsers contain the query object created by useQuery() hook.