title: How to stop multiple calls of the same query using React-query?
body: <p>I am using React-query for my React app.</p>
  <p>I have <code>useLogin</code> and <code>useLogout</code> hooks which use <code>useQuery</code>:</p>
  <pre><code>export const useLogin = (input?: LoginWithEmailPassword) =&gt; {
    const { data, isLoading, isSuccess, error } = useQuery(
      [&quot;loginWithEmailPassword&quot;],
      () =&gt; loginWithEmailPassword(input),
      {
        enabled: !!input,
      }
    );
  
    return { data: data?.data, isLoading, isSuccess, error };
  };
  
  export const useLogout = (accessToken?: string) =&gt; {
    const { isSuccess, isLoading, error } = useQuery(
      [&quot;logout&quot;],
      () =&gt; logout(accessToken),
      {
        enabled: !!accessToken,
      }
    );
  
    return { isSuccess, isLoading, error };
  };
  
  </code></pre>
  <p>In my AuthProvider; where I use the 2 hooks, I also have a <code>login</code> and <code>logout</code> function which will be called when a user clicks login/logout.</p>
  <p>Given React-query's declarative approach, I'm also keeping 2 states; <code>loginInput</code> and <code>logoutInput</code></p>
  <pre><code>AuthProvider.tsx
  
    const [loginInput, setLoginInput] = useState&lt;LoginWithEmailPassword&gt;();
    const [logoutInput, setLogoutInput] = useState&lt;string | undefined&gt;();
  
    const { data, isSuccess: isLoginSuccess, isLoading } = useLogin(loginInput);
    const {...} = useLogout(logoutInput);
  
    const login = (input: LoginWithEmailPassword) =&gt; {
      setLoginInput(input);
    };
  
    const logout = () =&gt; {
      setLogoutInput(data?.accessToken);
    };
  
  </code></pre>
  <p>This issue I've found is that after the user clicks login and set's the <code>loginInput</code> state; <code>useLogin</code> will run. But <code>useLogin</code> will re-run every time the component re-rerenders because <code>loginInput</code> will still have the state; i.e. if a user clicks <code>logout</code>, <code>useLogin</code> will run again. What would be the best way to resolve this?</p>
  <p>Things will be more straightforward if React-query has a <code>useLazyQuery</code> like Apollo.</p>
  <p>A hacky approach I can think of is to reset the <code>loginInput</code> state to <code>undefined</code>, like so:</p>
  <pre><code>useEffect(()=&gt;{
  if(isLoginSuccess &amp;&amp; !isLoading &amp;&amp; !!data) setLoginInput(undefined)
  },[isLoginSuccess])
  </code></pre>