如何正确地将变量传递给 apollo useQuery？

Posted 2023-03-10

【中文标题】如何正确地将变量传递给 apollo useQuery？

【英文标题】：How to properly pass variables to apollo useQuery?

【发布时间】：2020-02-17 00:35:39

【问题描述】：

所以我需要一双新鲜的眼睛来帮助我！我刚开始使用新的阿波罗钩子，它们非常酷！但是，当我尝试传递变量时遇到了一个问题，它返回未定义。

我在 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>
  );
;

【问题讨论】：

你做日志的时候异步功能已经完成了吗？

@Markus 感谢您的回复 :)！是的，我更新了问题以包含组件的代码。它遇到错误条件并返回一般错误消息。当我将变量直接硬编码到查询中时，它会返回一些数据

卡路里应该是一个字符串

@DanielRearden 抱歉，这是 *** 上的错字，我在编辑器中将其作为字符串

我还注意到，字符串类型在模板化的 const Query 中没有！ （非空），但在您的架构中它与！。查看 apollo 文档，在他们的示例中两者都匹配。也许这会有所作为？

【参考方案1】：

我认为问题在于您将 calories: 500 作为整数提供给查询，但您告诉 calories: String! 您只接受带有 !

的

String

编辑： 如果 API 接受，则删除 !，否则将输入值更改为“500” 例如

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