调用GraphQL Query返回Undefined，无法获取数据求助

以下是几个可能的原因及解决办法：

• 先处理异步加载状态
  useQuery 是异步执行的，组件首次渲染时 loading 为 true，此时 data 必然是 undefined。你需要等待加载完成后再访问数据，比如：

  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误：{error.message}</div>;
  // 此处再处理data逻辑
  

  直接在组件初始化时 console.log(data)，大概率会输出 undefined，因为请求还没完成。

• 验证查询参数与后端schema匹配

  1. 确认后端GraphQL服务中，Exam 查询的参数是否是 filter——部分服务（如Hasura）使用 where 而非 filter 作为查询条件的参数名，若后端定义的是 where，需修改查询：

     query ($itemId: Int) {
       Exam(where: { Exam_ID: { _eq: $itemId }}) {
         Exam_ID,
         Exam_Name,
         Exam_State { Exam_State_Name },
         Exam_Status { Exam_Status_Name },
         Eligibility_Class,
         Deadline
       }
     }
     

  2. 检查 $itemId 的类型是否与后端一致，你传递的是数字类型1，若后端期望字符串，需转换类型后传递。

• 核对查询字段与后端定义
  确认后端 Exam 类型包含你查询的所有字段：

  • 顶层字段 Exam_ID、Exam_Name、Eligibility_Class、Deadline 是否存在
  • 嵌套字段 Exam_State、Exam_Status 是否为对象类型，且包含 Exam_State_Name、Exam_Status_Name 字段
    若某个字段不存在，可能导致查询失败或返回空数据。

• 检查网络请求与客户端配置

  1. 打开浏览器开发者工具的Network面板，找到GraphQL请求，查看：
     • 请求是否成功发送（状态码200）
     • 请求参数中的variables是否正确传递
     • 后端返回的响应内容，是否有数据或错误信息
  2. 确认Apollo Client（或你使用的GraphQL客户端）已正确配置：
     • ApolloProvider已包裹组件树
     • client实例的uri指向正确的后端GraphQL地址

• 调整useQuery的缓存策略
  若缓存导致数据未更新，可强制从网络获取：

  const { loading, error, data } = useQuery(ExamOverviewQuery, {
    variables: { itemId: 1 },
    fetchPolicy: 'network-only'
  });
  

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