Graphql input object from angular object

0
votes

I want to use an angular object as an input variable to a graphql mutation. I've been researching for hours and have tried seemingly every possible combination per examples including using variables like this, which throws an error that theres a variable mismatch.

return this.apollo.mutate({
        mutation: gql`
          mutation saveLicense(license:License) {
            saveLicense(license:$license) {
              licenseId,
              name,
              body,
              deprecated,
              fsfLibre,
              osiApproved,
              spdxId,
              orLaterLicense,
              familyName,
              familyNameRegex,
              cleanName,
              twoNameRegex,
              nameAttributeList {
                attribute,
                index
              },
              attributes {
                attributeType,
                key
              }
            }
          }
        `,
         variables {license:license}
     });

Ultimately, the query submitted to the server needs to look like this(with values of course):

return this.apollo.mutate({
        mutation: gql`
          mutation {
            saveLicense(
               license:{
                   licenseId:"",
                                  name:"",
                                  licenseFamily:"",
                                  version:"",
                                  replacementLicenseId:"",
                                  spdxId:"",
                                  deprecated: false,
                                  fsfLibre:false,
                                  osiApproved:false,
                                  orLaterLicense:false,
                                  familyName:"",
                                  familyNameRegex:"",
                                  cleanName:"",
                                  twoNameRegex:"",
                                  body:"",
                                  description:""
                }
              ){
              licenseId,
              name,
              body,
              deprecated,
              fsfLibre,
              osiApproved,
              spdxId,
              orLaterLicense,
              familyName,
              familyNameRegex,
              cleanName,
              twoNameRegex,
              nameAttributeList {
                attribute,
                index
              },
              attributes {
                attributeType,
                key
              }
            }
          }
        `,
     });

The above query works, however I CANNOT figure out how to convert an angular object to the graphql string form that I need for the query. After HOURS of research the only solution I have is to covert the object to a json representation, then back again and pass license as a string. This is obviously a serious hack!

JSON.parse(JSON.stringify(mylicense))

I'm looking for either an example of how to use variables with angular/Apollo OR a cleaner way of converting angular objects into strings I can use in Graphql.

2
angulargraphqlapollo

2 Answers

1
votes

Here is the documentation how to use variables in graphql.

You should change your code as following.

return this.apollo.mutate({
  mutation: gql`
    mutation saveLicense($license: License) {
      saveLicense( license: $license ) {
        licenseId,
        name,
        body,
        deprecated,
        fsfLibre,
        osiApproved,
        spdxId,
        orLaterLicense,
        familyName,
        familyNameRegex,
        cleanName,
        twoNameRegex,
        nameAttributeList {
          attribute,
          index
        },
        attributes {
          attributeType,
          key
        }
      }
    }
  `,
    variables {license: license}
});
1
votes

Do not use string interpolation to inject variables into a query -- define your variables as part of your operation definition and then use them in place of an input literal.

First we define the variable by providing a name and the type. Note variables always start with a $:

mutation saveLicense($license: LicenseInput) {

Then use the variable as the input to an argument, like this:

saveLicense(license: $license) {

And finally pass in an appropriate JavaScript object as a variable to the mutate function:

const variables = {
  license: {
    licenseId: 123,
    // and so on
  }
}
this.apollo.mutate({ mutation, variables })