title: Conditionally calling an API using React-Query hook
body: <p>I am using react-query to make API calls, and in this problem case I want to only call the API if certain conditions are met.</p>
  <p>I have an input box where users enter a search query. When the input value is changed, a search server is called with the contents of the input as the search query ... but only if the input value is more than 3 chars long.</p>
  <p>In my react component I'm calling:</p>
  <pre><code>const {data, isLoading} = useQuery(['search', searchString], getSearchResults);
  </code></pre>
  <p>And my <code>getSearchResults</code> function will, conditionally, make an API call.</p>
  <pre><code>const getSearchResults = async (_, searchString) =&gt; {
      if (searchString.length &lt; 3)
          return {data: []}
  
      const {data}  = await axios.get(`/search?q=${searchString}`)
      return data;
  }
  </code></pre>
  <p>We can't use a hook inside a conditional - so I put the condition into my API calling function.</p>
  <p>This almost works. If I enter a short query string, there is no API request made and I get an empty array back for the <code>data</code>. Yay!</p>
  <p>But - <code>isLoading</code> will flip to <code>true</code> briefly - even though there is no HTTP request being made. So my loading indicator shows when there is no actual network activity.</p>
  <p>Am I misunderstanding how to best solve my use case, is there a way to enure that <code>isLoading</code> will return false if there is no HTTP activity?</p>