React Native中使用Apollo查询用户数据时变量$id未定义问题排查

你遇到的这个错误其实是个容易忽略的细节问题——GraphQL查询定义的变量名和你传入的变量名不匹配。

先看你的查询语句：

const GET_USER_DATA = gql` query User($id: ID!) { User(id: $id) { id name } }`;

这里你明确定义的查询变量是$id，但在<Query>组件里，你传入的变量是：

variables={{ userId }}

这相当于你传给Apollo的变量是{ userId: 你的用户ID值 }，但GraphQL一直在找$id这个变量，自然会提示“$id的值是undefined”，哪怕userId确实有值。

修正方法 #

把<Query>组件的variables改成和查询中定义的变量名一致，用id作为键，把userId的值赋给它：

const User = ({ userId }) => { 
  console.log("User id: ", userId); 
  return ( 
    <Query query={GET_USER_DATA} variables={{ id: userId }}> 
      {({ loading, error, data }) => { 
        if (loading) return <Text>Loading ...</Text>; 
        if (error) return <Text>Error!: {error.message}</Text>; 
        // 直接访问data.User的属性，比打印整个data对象更直观
        return ( 
          <Text>用户名: {data.User.name}，ID: {data.User.id}</Text> 
        ); 
      }} 
    </Query> 
  ); 
}

额外提示 #

你原来返回的<Text>Text: {data}</Text>会直接打印整个data对象，在React Native里这样显示不太友好，改成直接访问data.User的属性会更符合预期。

总结一下：Apollo会严格按照你在GraphQL查询中定义的变量名来匹配传入的变量，只要键名对应上，这个错误就会消失。

内容的提问来源于stack exchange，提问作者Kaiser Soze