来自 angular 对象的 Graphql 输入对象

Question

我想使用 angular 对象作为 graphql 突变的输入变量。我已经研究了几个小时，并尝试了每个示例的所有可能组合，包括使用这样的变量，这会引发变量不匹配的错误。

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

最终，提交给服务器的查询需要如下所示（当然有值）：

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
              }
            }
          }
        `,
     });

上面的查询有效，但是我无法弄清楚如何将 angular 对象转换为查询所需的 graphql 字符串形式。经过 HOURS 的研究，我唯一的解决方案是将对象转换为 json 表示，然后再次返回并将许可证作为字符串传递。这显然是一次严重的黑客攻击！

JSON.parse(JSON.stringify(mylicense))

我正在寻找如何将变量与 angular/Apollo 一起使用的示例，或者寻找将 angular 对象转换为可在 Graphql 中使用的字符串的更简洁的方法。

Answer 1

不要使用字符串插值将变量注入查询——将变量定义为操作定义的一部分，然后使用它们代替输入文字。

首先我们通过提供名称和类型来定义变量。注意变量总是以 $:

开头

mutation saveLicense($license: LicenseInput) {

然后使用变量作为参数的输入，像这样：

saveLicense(license: $license) {

最后将适当的 JavaScript 对象作为变量传递给 mutate 函数：

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

Answer 2

这里是 documentation 如何在 graphql 中使用变量。

您应该如下更改代码。

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

来自 angular 对象的 Graphql 输入对象

Graphql input object from angular object

apollo

graphql

angular