Being that react-query is heavily based on the declarative approach, the error handling I see in all examples looks something like this:
function Todos() {
const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList)
if (isLoading) {
return <span>Loading...</span>
}
if (isError) {//If there is an error, render different JSX
return <span>Error: {error.message}</span>
}
return (
<ul>
{data.map(todo => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
)
}
But what if I want to just show an alert, in case of an error? Or perhaps, i'm using some error handling interface, that has an imperative trigger? Something like this:
if (isError) alert(`An error has occurred: ${error.message}`)
In this case, I get two alerts. Something causes the component to re-render, which of course leads to "duplicate" error handling.
Why is this important to me? Because my error handling logic might not be based on rendering some specific JSX within my component, but rather on some manual one-time trigger. The alert is just a basic example.
Any suggestions will be greatly appreciated!
Have you tried using the onError callback?
It looks like this :
const useTodos = () =>
useQuery(['todos'], fetchTodos, {
// ⚠️ looks good, but is maybe _not_ what you want
onError: (error) =>
toast.error(`Something went wrong: ${error.message}`),
})
You see, the onError callback on useQuery is called for every Observer, which means if you call useTodos twice in your application, you will get two error toasts, even though only one network request fails