如何从节点 js 查询 GraphQl 端点而无需进行繁琐的字符串操作？

Question

我已经四处寻找查询 graphQl 端点的方法，但到目前为止，他们都有一个与我非常相似且笨拙的解决方案：字符串构建。这里有几个链接：

1. querying graphql with node
2. https://blog.apollographql.com/4-simple-ways-to-call-a-graphql-api-a6807bcdb355
3. https://www.npmjs.com/package/graphql-request

最终，我现在正在运行的代码（并不真正喜欢）是：

// replace anything that looks like this => %someVar
// with the value at vars[someVar]
function injectVars(query, vars) {
  return query.replace(/%([\d\w]+)/g, (_, varName) => {
    if (!vars.hasOwnProperty(varName)) {
      throw new Error(`Undefined variable: ${varName}`);
    }
    return vars[varName];
  });
}

// a query with the injection point "%userId"
const userQuery = `query getUser{
  user(
    id: "%userId"
  ) {
    id
    name
  }
}`;

// successful injection
const query = injectVars(userQuery, {
  userId: "some-id-123"
});
console.log(query);

// failed usage
const willFail = injectVars(userQuery, {
  nonVar: "missingUserId"
});

上面的代码有问题：

1. 似乎容易受到注入攻击

2. 不是很好的类型检查

3. 使用 ENUMS 或类型转换有点麻烦（即获取日期并将其设为字符串）

4. 不是很可扩展。必须为不同的迭代复制粘贴很多相同的东西。

5. 我是新手，天生不相信我的解决方案。

无论如何，我如何从节点 js 查询 GraphQl 端点，而无需进行繁琐的字符串操作？是否有任何工具/建议可以使这种交互更加面向对象？

Answer 1

使用variables，如official tutorial所示。

可以使用变量对 GraphQL 查询进行参数化，最大限度地重复使用查询，并避免在运行时在客户端中构建代价高昂的字符串...变量必须在操作的顶部定义，并且在该操作的整个执行过程中都在范围内。

一个例子：

const query = `query getUser($id: ID!) {
  user(
    id: $id
  ) {
    id
    name
  }
}`
const variables = {
  id: 'someId'
}
fetch('/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
  body: JSON.stringify({
    query,
    variables,
  })
})

您提供的 JSON 值将被解析为您在文档中指定的类型（在上面的示例中，为 ID 标量）。这些变量将由 GraphQL 服务验证，因此您也可以跳过检查它们是否已定义或类型是否正确。只要变量被声明为枚举类型，字符串值就会被解析为适当的枚举值。 ID 可以是整数或字符串。输入对象类型也将被适当地解析和处理。