在 React 中使用来自 graphql 响应的数据答案

【问题标题】：Use data from graphql response in React在 React 中使用来自 graphql 响应的数据
【发布时间】：2022-12-10 20:03:53
【问题描述】：

我想这是一个简单的问题，但我被困在这里一段时间了，所以任何建议都可能有所帮助！

我有一个 React 应用程序，我正在调用 GraphQL api（使用 apollo）。在箭头函数组件中，我有：

const [executeQuery, { data }] = useLazyQuery(GET_ALL_TASKS);

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

查询成功，在浏览器检查面板中，我将其作为 graphql 响应得到：

{
  "data" : {
    "tasks" : [ {
      "id" : "2251",
      "name" : "some_name",
      "__typename" : "Task"
    } ]
  }
}

在我的代码中，我想使用检索到的ID.如何将 id 从响应中分离出来？当我试图访问数据我得到一个不明确的错误。谢谢！

【问题讨论】：

标签： reactjs json graphql

【解决方案1】：

不确定为什么要将 executeQuery 包装在一个函数中。

数据将成为响应的一部分，因此您可以像这样获取它：

const {data, loading} = executeQuery({
  variables: {
    "query": {
       "state": "CREATED",
       "taskDefinitionId": "something"
     }
   }
})

// may also need to check for the error state
if(loading){
  console.log("Loading...")
}else{
  /// the ids seem to be an array of objects
  const ids = data.tasks.map((task)=> task.id)
  console.log(ids)
}

【讨论】：

这也是我尝试做的，但我得到“未捕获的类型错误：无法在 Object.findId 读取未定义的属性（读取‘任务’）”虽然感谢您的建议！
@konkouts 我更新了你基本上需要检查加载和错误状态以查看数据是否已正确返回的答案
从我的测试来看，这似乎不是加载情况。通过进一步的研究，我认为它可能与 apollo 缓存有关，但我仍在努力理解这一点。

【解决方案2】：

对于可能遇到相同问题的任何人，我意识到这是 apollo 客户端中发生的缓存错误。我想不出解决办法。但是，我暂时解决了它将 apollo 客户端依赖降级到版本 3.2.5

【讨论】：