GraphiQL中GraphQL查询返回NULL但控制台可打印数据如何解决？

问题根源 #

该问题和GraphQL配置无关，本质是Node.js异步执行顺序导致的：

• connection.query 是回调式异步API，代码执行到return result的时候，数据库查询的回调函数还未触发，result仍为初始值undefined，GraphQL resolver返回undefined就会对应输出null。
• 终端能打印出结果是因为回调在数据库查询完成后才执行，此时虽然打印了数据，但早已过了resolver的返回时机。

修复方案 #

标准修复代码 #

将callback风格的查询封装为Promise，给resolver加async标识，等待查询结果返回后再输出，修改后的resolver代码如下：

address: {
  type: AddressType,
  description: "An Address",
  args: {
    id: { type: GraphQLInt },
  },
  // resolver添加async标识
  resolve: async (parent, args) => {
    return new Promise((resolve, reject) => {
      connection.query(
        // 改用参数化查询，避免SQL注入漏洞
        `SELECT * FROM addresses WHERE id = ?`,
        [args.id],
        (err, res, fields) => {
          if (err) return reject(err);
          // 返回查询到的第一条地址数据
          resolve(res[0]);
        }
      );
    });
  },
},

简化方案（使用mysql2的内置Promise API） #

如果你用的是mysql2包，可以直接使用它内置的promise版本API，无需手动封装Promise：

// 初始化连接时引入promise版本的mysql2
const mysql = require('mysql2/promise');
const connection = await mysql.createConnection({ /* 你的数据库连接配置 */ });

// resolver写法可大幅简化
resolve: async (parent, args) => {
  const [rows] = await connection.query(
    `SELECT * FROM addresses WHERE id = ?`,
    [args.id]
  );
  return rows[0];
}

修改完成后再在GraphiQL中执行查询即可正常拿到业务数据。

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