React Native中带变量的GraphQL查询异常排查求助

看起来你遇到的是典型的GraphQL请求参数或类型不匹配问题——只保留hello查询正常，说明你的Apollo客户端基础配置没问题，问题出在新增的查询字段和变量传递上。我给你梳理几个关键排查方向：

1. 先修正Query组件的回调参数，获取真实错误信息 #

你当前的Query组件render prop写法有误，Apollo的Query组件返回的是一个包含data、loading、error的对象，而不是分开的response和error参数。这也是你console.log输出undefined的核心原因之一，因为错误信息根本没被正确捕获。

修改后的代码应该是这样：

<Query 
  query={query} 
  variables={{userID, employeeID, salonID, day: currentDay, serviceTime}}
>
  {( { data, loading, error } ) => {
    // 先捕获错误并打印详细信息
    if (error) {
      console.error('GraphQL 请求错误:', error);
      return <Text>加载失败: {error.message}</Text>;
    }
    
    // 加载状态处理
    if (loading) {
      return <CircularProgress />;
    }

    console.log('查询结果:', data);
    return (
      <Grid>
        <Col>
          <MyHeader 
            navigation={this.props.navigation} 
            title={context.state.currentDay.format("DD.MM.YYYY").toString()} 
          />
          <ScheduleList data={data.listOfAppointments} />
        </Col>
      </Grid>
    );
  }}
</Query>

修正后，error对象里会包含服务器返回的具体错误描述（比如变量类型不匹配、字段不存在等），这是定位问题的关键。

2. 检查变量类型与GraphQL Schema是否完全匹配 #

你的查询里定义了几个非空变量：

query Query($userID:String!,$employeeID:String!,$salonID:String!,$day:Int!,$serviceTime:Int)

这里要重点注意：

• $day是Int!（非空整数），但你从context取的currentDay看起来是Moment对象（因为你用了format方法），直接传Moment对象给服务器的Int类型参数肯定会报错。你需要把它转换成服务器期望的整数格式：
  • 如果服务器需要的是「当月第几天」：currentDay.date()（返回数字，比如25）
  • 如果服务器需要的是「时间戳」：currentDay.unix()（返回时间戳整数）
• $serviceTime是Int，确认context.state.serviceTime是不是字符串类型，如果是，要转成数字：Number(serviceTime)
• 所有带!的变量（userID、employeeID、salonID、day）都不能是undefined，检查context里这些值是否已经被正确初始化，有没有可能在组件渲染时还未赋值。

3. 验证查询语句的语法与字段正确性 #

检查你的GraphQL查询是否有语法或拼写错误：

• 确认listOfAppointments和employeeInfo的参数名、字段名和服务器Schema完全一致（比如服务器是不是用salonId而不是salonID？大小写要严格对应）
• 参数之间的换行是允许的，但如果你的GraphQL客户端版本较旧，也可以尝试把参数写成一行用逗号分隔，排除格式问题：

listOfAppointments(userID: $userID, employeeID: $employeeID, salonID: $salonID, day: $day, serviceTime: $serviceTime)

4. 单独测试查询与变量 #

用GraphQL Playground、Postman或者Insomnia直接向你的服务器发送查询请求，手动传入变量值，确认服务器是否能正常响应：
示例请求体：

{
  "query": "query Query($userID:String!,$employeeID:String!,$salonID:String!,$day:Int!,$serviceTime:Int){ hello listOfAppointments(userID: $userID, employeeID: $employeeID, salonID: $salonID, day: $day, serviceTime: $serviceTime) { start end status disabled } employeeInfo(employeeID: $employeeID, salonID: $salonID){ token name ID notifyWhenCreated notifyWhenDeleted salonName } }",
  "variables": {
    "userID": "你的真实用户ID",
    "employeeID": "你的真实员工ID",
    "salonID": "你的真实沙龙ID",
    "day": 25,
    "serviceTime": 1440
  }
}

如果单独测试也返回400，那问题出在服务器端的Schema或查询逻辑；如果测试正常，那就是客户端变量传递的问题（比如变量值未正确转换）。

5. 确保变量无undefined值 #

在传递变量前先打印所有变量，确认没有undefined：

const { userID, employeeID, salonID, currentDay, serviceTime } = context.state;
console.log('要传递的变量:', { userID, employeeID, salonID, day: currentDay, serviceTime });

// 只有当所有非空变量都存在时，才渲染Query组件
if (!userID || !employeeID || !salonID || !currentDay) {
  return <CircularProgress />;
}

因为你的查询里$userID、$employeeID、$salonID、$day都是非空类型（带!），如果传递undefined，服务器会直接返回400错误。

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