Backbencher.dev

Error Handling in useQuery React Query Hook

Last updated 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.

--- ○ ---
Joby Joseph
Web Architect