title: How to trigger requests with a button using React-query?
body: <p>I have been trying to learn React-query but can't seem to trigger requests with my <code>onSubmit</code> event. Right now the code is sending the request with &quot;washington&quot; as the default parameter and printing it to the screen, and a new request also triggers with the <code>onBlur</code> event, and fetch the data if the city typed is valid.</p>
  <p>The thing is that wish I could move this logic to the <code>submit()</code> function, treat the data on the input and only if the data is valid, proceed to make the request. This is the stackblitz where I reproduced the problem with a free apiKey: <a href="https://stackblitz.com/edit/react-cv52rp?file=src/view/weather.js" rel="nofollow noreferrer">StackBlitz</a></p>
  <p>This is the code:</p>
  <pre><code>import React, { useState } from 'react';
  import { useQuery } from 'react-query';
  import axios from 'axios';
  
  const Fetch = async city =&gt; {
    let apiKey = '91b5ff77e9e7d1985a6c80bbbb3b2034';
    const { data } = await axios.get(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&amp;appid=${apiKey}&amp;units=metric`
    );
    return data;
  };
  
  const Weather = () =&gt; {
    const [city, setCity] = useState('washington');
    const { data, error } = useQuery(['temperature', city], () =&gt; Fetch(city));
  
    const submit = () =&gt; {};
  
    return (
      &lt;div&gt;
        &lt;form onSubmit={submit}&gt;
          &lt;input onBlur={e =&gt; setCity(e.target.value)} type=&quot;text&quot; /&gt;
          &lt;button type=&quot;submit&quot;&gt;send&lt;/button&gt;
        &lt;/form&gt;
        {!data ? null : &lt;div&gt;{data.main.temp}&lt;/div&gt;}
      &lt;/div&gt;
    );
  };
  
  export default Weather;
  </code></pre>