title: How to properly pass variables to apollo useQuery?
body: <p>So I need a pair of fresh eyes to help me out! I just started using the new hooks for apollo and they are pretty cool! However, I am running into an issue when I try to pass variables, it returns undefined.</p>
  
  <p>I have this query in a graphql server which hits a rest API but at the moment I just have returning scalar JSON</p>
  
  <pre class="lang-js prettyprint-override"><code>fetchRecipes(calories: String!, meal: String!): JSON
  </code></pre>
  
  <p>in my component:</p>
  
  <pre><code>  const { data, loading, error } = useQuery(FETCH_RECIPES, {
      variables: { calories: 500, meal: "beef" }
    });
  </code></pre>
  
  <pre><code>const FETCH_RECIPES = gql`
    query FetchRecipes($calories: String, $meal: String) {
      fetchRecipes(calories: $calories, meal: $meal)
    }
  `;
  </code></pre>
  
  <p>when I <code>console.log(data)</code> it returns <code>undefined</code>,</p>
  
  <p>however, why does this work? (not passing the variables through <code>useQuery</code>)</p>
  
  <pre><code>  query {
      fetchRecipes(calories: "500", meal: "beef")
    }
  </code></pre>
  
  <p>This is what the component looks like: </p>
  
  <pre><code>const Recipes = () =&gt; {
    const { data, loading, error } = useQuery(FETCH_RECIPES, {
      variables: { calories: "500", meal: "beef" }
    });
  
    if (loading) return &lt;Loading&gt;Loading...&lt;/Loading&gt;;
    if (error) return &lt;Error&gt;Data couldn't be fetched&lt;/Error&gt;;
  
    return (
      &lt;RecipeContext.Consumer&gt;
        {({ suggestedCaloricIntake }) =&gt; (
          &lt;View&gt;
            &lt;Text&gt;Suggested: {suggestedCaloricIntake}&lt;/Text&gt;
  
            &lt;Picture
              style={{ width: 150, height: 150 }}
              source={{ uri: data.fetchRecipes.hits[0].recipe.image }}
              accessibilityLabel='meal image'
            /&gt;
          &lt;/View&gt;
        )}
      &lt;/RecipeContext.Consumer&gt;
    );
  };
  </code></pre>