Как правильно передать переменные в apollo useQuery? - PullRequest
Новая
       20

Как правильно передать переменные в apollo useQuery?

0 голосов
/ 21 октября 2019

Так что мне нужна пара свежих глаз, чтобы выручить меня! Я только начал использовать новые крючки для Apollo, и они довольно крутые! Тем не менее, я сталкиваюсь с проблемой, когда я пытаюсь передать переменные, он возвращает неопределенное значение.

У меня есть этот запрос на сервере graphql, который обращается к API остальных, но в данный момент я просто возвращаю скалярный JSON 

fetchRecipes(calories: String!, meal: String!): JSON

в моем компоненте: 

  const { data, loading, error } = useQuery(FETCH_RECIPES, {
    variables: { calories: 500, meal: "beef" }
  });

const FETCH_RECIPES = gql`
  query FetchRecipes($calories: String, $meal: String) {
    fetchRecipes(calories: $calories, meal: $meal)
  }
`;

когда я console.log(data) возвращает undefined,

однако, почему это работает? (не передавая переменные через useQuery) 

  query {
    fetchRecipes(calories: "500", meal: "beef")
  }

Вот как выглядит компонент: 

const Recipes = () => {
  const { data, loading, error } = useQuery(FETCH_RECIPES, {
    variables: { calories: "500", meal: "beef" }
  });

  if (loading) return <Loading>Loading...</Loading>;
  if (error) return <Error>Data couldn't be fetched</Error>;

  return (
    <RecipeContext.Consumer>
      {({ suggestedCaloricIntake }) => (
        <View>
          <Text>Suggested: {suggestedCaloricIntake}</Text>

          <Picture
            style={{ width: 150, height: 150 }}
            source={{ uri: data.fetchRecipes.hits[0].recipe.image }}
            accessibilityLabel='meal image'
          />
        </View>
      )}
    </RecipeContext.Consumer>
  );
};
...