title: How to imperatively handle an error, with react-query?
body: <p>Being that react-query is heavily based on the <strong>declarative</strong> approach, the error handling I see in all examples looks something like this:</p>
  <pre><code>function Todos() {
     const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList)
   
     if (isLoading) {
       return &lt;span&gt;Loading...&lt;/span&gt;
     }
   
     if (isError) {//If there is an error, render different JSX
       return &lt;span&gt;Error: {error.message}&lt;/span&gt;
     } 
     
     return (
       &lt;ul&gt;
         {data.map(todo =&gt; (
           &lt;li key={todo.id}&gt;{todo.title}&lt;/li&gt;
         ))}
       &lt;/ul&gt;
     )
   }
  </code></pre>
  <p>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:</p>
  <pre><code>if (isError) alert(`An error has occurred: ${error.message}`)
  </code></pre>
  <p>In this case, I get  <strong>two alerts</strong>. Something causes the component to re-render, which of course leads to &quot;duplicate&quot; error handling.</p>
  <p>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.</p>
  <p>Any suggestions will be greatly appreciated!</p>