Question 110978 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Json – Use data from graphql response in React

I guess this is a simple issue, but I am stuck here for a while, so any advice may be helpful!

I have a react app and I am calling a GraphQL api (with apollo). Inside an arrow function component I have:

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

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

The query is successful and in the browser inspect panel I get this as the graphql response:

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

In my code I want to use the retrieved id. How can I isolate the id from the response? When I am trying to access the data I get an undefined error.
Thank you!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    For anyone who may have the same problem, I realized it is a caching error happening in apollo client. I couldn't figure out the solution. However, I temporarily solved it by downgrading the apollo client dependency to version 3.2.5


  2. 0

    Not sure why you are wrapping your executeQuery in a function.

    The data will be part of the response so you can get it like this:

    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)
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search