title: How to wait for server response before calling Apollo Graph QL Query?
body: <p>I'm attempting to call a Graph QL Query after receiving data from my useEffect hook. I need the data from the response to use in the Query. Hooks however cannot be called conditionally. If I take away the condition however, loadedAnime will be undefined. How do I get around this restraint?</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import { useParams } from &quot;react-router-dom&quot;;
  import AnimeBanner from &quot;../components/AnimeBanner&quot;;
  import { useHttpClient } from &quot;../Hooks/http-hook&quot;;
  import { GetAnimeData } from &quot;../GraphQLFunctions&quot;;
  import { useQuery } from &quot;@apollo/react-hooks&quot;;
  import gql from &quot;graphql-tag&quot;;
  
  const GET_ANIME_INFO = gql`
    query GetAnimeInfo($name: String!) {
      Media(search: $name) {
        title {
          romaji
          english
          native
          userPreferred
        }
        episodes
        id
        bannerImage
      }
    }
  `;
  
  const Anime = (props) =&gt; {
    //Logic for getting anime data from mongoDB (episodes, name, cover image)
    const { isLoading, error, sendRequest } = useHttpClient();
    const [loadedAnime, setloadedAnime] = useState();
    const URLTitle = useParams().URLTitle;
  
    useEffect(() =&gt; {
      const fetchAnime = async () =&gt; {
        try {
          const responseData = await sendRequest(
            &quot;http://localhost:5000/api/anime/&quot; + URLTitle
          );
          setloadedAnime(responseData.animeData[0]);
        } catch (err) {
          console.log(err);
        }
      };
      fetchAnime();
    }, [sendRequest, URLTitle]);
  
    if (isLoading || error) {
      return null;
    }
  
    //Logic for getting anime data from anilist (Descriptions, tags, banner, trailer, etc.)
    const { apiData, apiLoading, apiError } = useQuery(GET_ANIME_INFO, {
      variables: {
        name: loadedAnime.anime_name,
      },
    });
  
    if (apiLoading || apiError) {
      return null;
    }
  
    return &lt;AnimeBanner src={apiData.Media.bannerImage} /&gt;;
  };
  
  export default Anime;
  
  </code></pre>