GraphQL Angular Apollo Client - Query with dynamic fields based on the checkbox value from the HTML

337 Views Asked by At

Below is the angular HTML and component logic, the 'doGetQuerySpecific()' method is called from html on click of 'Submit' on a form which has two checkboxes. I need to map these checkbox logic to the GQL query like shown in the component code. The logic which I want to implement is somehow satisfied below, but is this the optimal way? Any other way rather than using the if and else if conditions like this!!!

My .HTML:

            <form action="" (ngSubmit)="doGetQuerySpecific(p2)" #p2="ngForm">
                <div class="form-check">
                    <input type="checkbox" name="name" id="name" value="name" ngModel class="form-check-input">
                    <label class="form-check-label" for="name">Name</label>
                </div>
                <br>
                <div class="form-check">
                    <input type="checkbox" name="access" id="access" value="access" ngModel class="form-check-input">
                    <label class="form-check-label" for="access">Access</label>
                </div>

                <br>
                <br>
                <button type="submit" class="btn btn-danger">Get</button>
            </form>

MY .ts code:

doGetQuerySpecific(form: NgForm) {
    this.toHTML = 'Loading...'
    var name1 = false;
    var access1 = false;
    name1 = form.value.name;
    access1 = form.value.access;

    if (name1 == true && access1 == true) {
      var GET_Specific = gql`
      query {
        hello {
          id
          name
          access
        }
      }
      `;
    }

    else if (name1 == true && access1 == false) {
      var GET_Specific = gql`
      query {
        hello {
          id
          name
        }
      }
      `;
    }
}
0

There are 0 best solutions below