title: use query hook react Apollo conditional call
body: <p>I have been using <code>react-apollo</code> and the render prop approach.</p>
  
  <p>This worked perfectly and my code looked something like this.</p>
  
  <pre><code>const App = () =&gt; {
     const [player, setPlayer] = React.useState(null);
     if (player) {
       return (
          &lt;GetBroncosPlayerQuery variables={{ player }}&gt;
             {({ data }) =&gt; {
                // do stuff here with a select box
              }} 
          &lt;/GetBroncosPlayersQuery&gt;
       )
     }
  }
  </code></pre>
  
  <p>Now, if I try doing the same with the <code>useQuery</code> hook I get the following error, when my code looks like this:</p>
  
  <pre><code>const App = () =&gt; {
     const [player, setPlayer] = React.useState(false);
  
     if (isBroncos) {
         const { data } = useQuery(GetBroncosPlayersQueryDocument, {
           variables: { player }
        });
        // do stuff here
     }
  }
  </code></pre>
  
  <p>This gives an error that you cannot use a hook in a conditional statement. I then implemented <code>useLazyQuery</code> but this doesn't work either as after you <a href="https://www.apollographql.com/docs/react/api/react-hooks/#uselazyquery" rel="noreferrer">call it once it behaves like <code>useQuery</code></a>, so it works the first time, but if the user changes a select dropdown to be empty again it breaks.</p>
  
  <p>What is the best approach with the query hook to only call the query conditionally?</p>