如何给GraphQL查询AST添加Error片段？

需求背景 #

现有如下GraphQL mutation查询：

mutation Test ($input: UpdateUserAccountInput!) {
  updateUserAccount(input: $input) {
    ... on UpdateUserAccountPayload {
      userAccount {
        name
      }
    }
  }
}

需要为其添加Error片段，解决测试中mutation返回错误时的静默失败问题：

... on Error {
  message
}

已通过graphql包的parse和gql方法获取了查询的AST，需实现自动注入该片段的逻辑，用于扩展GraphQL测试客户端，使其在返回错误时自动抛出异常。

实现方案 #

借助graphql包中的visit工具遍历并修改AST，具体步骤如下：

• 导入visit和print工具（print用于验证修改结果）
• 分别解析原始mutation查询和Error片段为AST节点
• 遍历原始AST，定位到mutation字段的selectionSet，添加Error片段节点
• 可选：用print将修改后的AST转回字符串，确认注入结果

完整代码示例 #

import { parse, gql, visit, print } from 'graphql';

// 解析原始mutation的AST
const originalQueryAST = parse(gql`
  mutation Test ($input: UpdateUserAccountInput!) {
    updateUserAccount(input: $input) {
      ... on UpdateUserAccountPayload {
        userAccount {
          name
        }
      }
    }
  }
`);

// 解析Error片段的AST节点
const errorFragmentAST = parse(gql`
  ... on Error {
    message
  }
`).definitions[0].selectionSet.selections[0];

// 遍历并修改AST
const modifiedQueryAST = visit(originalQueryAST, {
  Field(fieldNode) {
    // 向目标字段的selectionSet中添加Error片段
    fieldNode.selectionSet.selections.push(errorFragmentAST);
    return fieldNode;
  },
});

// 可选：打印修改后的查询字符串验证结果
console.log(print(modifiedQueryAST));

修改后的查询结果 #

执行代码后生成的查询字符串如下，已成功注入Error片段：

mutation Test($input: UpdateUserAccountInput!) {
  updateUserAccount(input: $input) {
    ... on UpdateUserAccountPayload {
      userAccount {
        name
      }
    }
    ... on Error {
      message
    }
  }
}

后续扩展 #

将该逻辑集成到测试客户端后，每次发送mutation请求前自动修改AST，收到响应后检查Error类型的返回结果，若存在message字段则抛出异常，即可避免测试的静默失败问题。

内容的提问来源于stack exchange，提问作者Frank Fiegel