Express GraphQL访问/graphql报错及GraphiQL加载卡住问题排查

两个异常均由users查询的Schema配置错误引发：

• users查询的返回类型配置错误：你注释掉了数组类型声明type: new GraphQLList(UserType)，错误将返回值类型设置为单个UserType，但resolve方法中User.find()返回的是用户数组，类型不匹配会直接导致GraphQL Schema校验失败，GraphiQL界面无法完成初始化，就会一直停在Loading状态。
• Schema校验失败后，端点无法正常处理请求解析逻辑，所有未携带合法query参数的请求（包括GraphiQL初始化拉取Schema的请求、Insomnia中未编写查询语句直接发起的请求），都会直接返回Must provide query string错误。

额外的逻辑缺陷：users查询定义了id入参，但resolve方法中没有针对该参数做单条数据过滤，即使修复类型问题，传入id也无法获取对应用户。

1. 补全GraphQL类型引入，恢复users查询的正确返回类型，同时补全id参数的过滤逻辑，修改后代码如下：

// 文件顶部补全GraphQLList的引入，示例：
const { GraphQLObjectType, GraphQLString, GraphQLInt, GraphQLList, GraphQLSchema } = require('graphql');
const { graphqlHTTP } = require('express-graphql');

// users (query)
const users = {
  type: new GraphQLList(UserType), // 恢复数组类型，匹配列表返回值
  args: { id: { type: GraphQLInt } },
  //@ts-ignore
  async resolve(parent, args) {
    // 传入id时返回对应用户，未传入时返回全量用户列表
    if (args.id) {
      const targetUser = await User.findOne({ id: args.id });
      return targetUser ? [targetUser] : [];
    }
    return await User.find();
  },
};

2. 重启Node服务，重新访问http://127.0.0.1:3000/graphql即可正常加载GraphiQL界面。
3. 使用接口工具请求时，需要携带合法的GraphQL查询语句，示例测试查询：

query GetUserList {
  users {
    id
    firstname
    lastname
    email
  }
}

提示：如果修复类型后仍无法加载GraphiQL，检查本地graphql与express-graphql依赖版本是否匹配，避免跨大版本混用引发兼容问题。

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