title: Trigger a query refresh (invalidate?) from onClick handler
body: <p>New to react-query. Have a pretty table with a manual refresh button.  The parent that owns the table and button row owns the query, and I'm passing a &quot;reload&quot; function down through props, which the onClick (a few levels down) executes:</p>
  <pre><code>const MyComponent = () =&gt; {
     
     var qKey = ['xyz', foo, bar];
     
     const reload = () =&gt; {
          useQueryClient().invalidateQueries(qKey)
     }
  
     const {isLoading, error, data, isFetching} = useQuery(qKey, async () =&gt; {
        /* stuff */
        return response.json()
      }, {keepPreviousData: true});
  
     return (
        &lt;ActionsBar onRefresh={reload} onClear={foo} onSearch={bar}/&gt;
        &lt;Other stuff...&gt;
     )
  }
  
  const ActionBar = (props) =&gt; {
     const {onRefresh, onClear, onSearch} = props;
  
     return (
        &lt;Button onClick={ () =&gt; onRefresh()}&gt;Refresh&lt;/Button&gt;
        /* other stuff */
  </code></pre>
  <p>Getting an error that &quot;reload&quot; is calling a hook but is not a React function component or a customer React hook function.</p>
  <p>I suspect this is a useEffect issue but not sure how that fits into the above scenario?</p>