Adding Variable for Text Input GraphQL

Queries and Resources
1

I am trying to create a searchable table that uses GraphQL API. I think there was an update to the GraphQL UI. I first tried using the {{}} method to add the variable. Then I saw that using $variable would create the variable for me. I tried this method but the Variable tabs are greyed out. I'm not sure what I'm doing wrong.

query ($fname: String){
  people (where: {firstname_n: {name: $fname}){
    firstname_n {
      name
    }
    middlename_n {
      name
    }
    lastname_n {
      name
    }
    phone_n {
      name
    }
    email_n {
      name
    }
    dob_n {
      name
    }
    eid_n {
      name
    }
  }
}

When I hardcode the search part, {name: "Yazan"}, the table gets populated.

As you can see in the image, the Variable in greyed out.

image
image944×165 6.88 KB

I want to pass the search variable textinput1.value to the query variable in order to search for the records based on the first name.

2

I managed to solve the issue.

I had to adjust the query to the following:

query ($fname: String!) {
  people (where: {name: $fname}) {
    child {
      firstname {
      name
      }
      middlename {
        name
      }
      lastname {
        name
      }
      phone {
        name
      }
      email {
        name
      }
      dob {
        name
      }
      eid {
        name
      }
    }
  }
}