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

icomxhvb 于 2022-12-12 发布在 React

关注(0)|答案(2)|浏览(164)

我想这是一个简单的问题，但我被困在这里一段时间，所以任何建议可能会有帮助！
我有一个react应用程序，我正在调用一个GraphQL API（使用apollo）。在一个箭头函数组件中，我有：

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

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

查询成功，在浏览器的inspect面板中，我得到了graphql响应：

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

在我的代码中，我想使用检索到的id。我如何从响应中分离出id？当我试图访问 data 时，我得到了一个 undefined 错误。谢谢！

reactjs

来源：https://stackoverflow.com/questions/74721316/use-data-from-graphql-response-in-react

2条答案

按热度按时间

5uzkadbs1#

不确定为什么要将executeQuery Package 在函数中。
数据将是响应的一部分，因此您可以按如下方式获取数据：

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)
}

赞(0）回复(0）举报 2022-12-12

g0czyy6m2#

对于任何可能有同样问题的人，我意识到这是一个发生在apollo客户端的缓存错误。我无法找出解决方案。但是，我暂时解决了它降级apollo客户端依赖到版本3.2.5

赞(0）回复(0）举报 2022-12-12