React中如何从Apollo GraphQL查询响应中提取ID？

问题根源 #

• useLazyQuery 返回的 data 初始值是 undefined，因为查询是异步执行的——调用 executeQuery 后得等API响应返回，这期间直接访问 data 自然会拿到 undefined。
• 就算查询成功，也得先确认 data.tasks 存在且不为空，不然直接访问 id 照样会报错。

解决方案 #

1. 用可选链安全访问数据 #

在需要读取id的地方，用可选链操作符（?.）避免空值报错，还可以配合空值合并运算符（??）设置默认值：

// 组件渲染时使用
{data?.tasks?.[0]?.id ?? '暂无任务ID'}

// 函数内处理逻辑
const getFirstTaskId = () => {
  if (data?.tasks?.length > 0) {
    return data.tasks[0].id;
  }
  return null;
};

2. 在查询回调里直接处理结果 #

调用 executeQuery 时传入 onCompleted 回调，查询完成后直接从响应里提取id，这样能确保拿到的是最新的返回数据：

const findId = (step) => {
  executeQuery({
    variables: {
      "query": {
        "state": "CREATED",
        "taskDefinitionId": "something"
      }
    },
    onCompleted: (responseData) => {
      const targetId = responseData.tasks?.[0]?.id;
      if (targetId) {
        // 在这里用拿到的id做后续操作
        console.log('获取到的任务ID：', targetId);
      }
    }
  })
}

3. 结合状态监听处理数据 #

如果需要在组件中保存或展示id，可以配合React的状态和副作用监听：

import { useState, useEffect } from 'react';
import { useLazyQuery } from '@apollo/client';

const YourComponent = () => {
  const [taskId, setTaskId] = useState(null);
  const [executeQuery, { data, loading, error }] = useLazyQuery(GET_ALL_TASKS);

  const findId = (step) => {
    executeQuery({
      variables: {
        "query": {
          "state": "CREATED",
          "taskDefinitionId": "something"
        }
      }
    })
  }

  // 监听data变化，自动更新taskId
  useEffect(() => {
    if (data?.tasks?.length > 0) {
      setTaskId(data.tasks[0].id);
    }
  }, [data]);

  // 处理加载和错误状态
  if (loading) return <div>查询中...</div>;
  if (error) return <div>查询失败：{error.message}</div>;

  return <div>当前任务ID：{taskId}</div>;
};

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