title: How to fetch multiple conditional queries in Apollo Client React?
body: <p>I'm using Apollo Client, and for fetching queries I'm using <code>useQuery</code> from the package <code>@apollo/react-hooks</code>.</p>
  <p>I would like to accomplish the following:</p>
  <h2>List of Steps:</h2>
  <p><strong>Step 1:</strong> Fetch a query <code>stage</code></p>
  <pre><code>const GetStage = useQuery(confirmStageQuery, {
    variables: {
      input: {
        id: getId.id
      }
    }
  });
  </code></pre>
  <p><strong>Step 2:</strong> Based on the response that we get from <code>GetStage</code>, we would like to switch between 2 separate queries</p>
  <pre><code>if (!GetStage.loading &amp;&amp; GetStage.data.getGame.stage === &quot;Created&quot;) {
    Details = useQuery(Query1, {
      variables: {
        input: {
          id: getId.id
        }
      }
    });
  } else if (!GetStage.loading &amp;&amp; GetStage.data.getGame.stage === &quot;Confirmed&quot;) {
    Details = useQuery(Query2, {
      variables: {
        input: {
          id: getId.id
        }
      }
    });
  }
  </code></pre>
  <p><strong>Step 3:</strong> Also when the page loads every time, I'm re-fetching the data.</p>
  <pre><code>useEffect(() =&gt; {
    //Fetch for Change in the Stage
    GetStage.refetch();
  
    //Fetch for Change in the Object
    if (Details) {
      Details.refetch();
      if (Details.data) {
        setDetails(Details.data.getGame);
      }
    }
  });
  </code></pre>
  <hr />
  <h2>Problem?</h2>
  <blockquote>
  <p>Rendered more hooks than during the previous render.</p>
  <p>Details.data is undefined</p>
  </blockquote>
  <p>So how can we call multiple async queries in Apollo Client?</p>