按ExpressJS GraphQL-HTTP文档集成后遇Missing query错误，无法调出GraphiQL UI

你按照graphql-http的Express集成步骤编写代码后，开启了graphiql: true配置，但访问/graphql时只收到400错误响应：

{"errors":[{"message":"Missing query"}]}

无法调出用于测试查询的GraphiQL可视化界面，问题出在两个关键环节：

核心原因 #

graphql-http的createHandler仅在**GET请求且请求头Accept包含text/html**时返回GraphiQL界面。如果请求不符合该条件（比如误发POST请求、浏览器请求头未触发逻辑），就会进入GraphQL查询处理流程，因缺少query参数返回400错误。另外，你的代码缺少服务器启动监听逻辑，服务根本未运行。

修复步骤 #

1. 添加服务器监听代码
   必须启动Express服务器才能对外提供服务，在代码末尾补充：

   app.listen(4000, () => {
     console.log('GraphQL server running on http://localhost:4000/graphql');
   });
   

2. 确保正确访问方式
   启动服务后，用浏览器直接访问http://localhost:4000/graphql——正常浏览器的GET请求会自动携带包含text/html的Accept头，触发GraphiQL界面加载。

完整可运行代码 #

import express from 'express'; // yarn add express
import { createHandler } from 'graphql-http/lib/use/express';
import { GraphQLSchema, GraphQLObjectType, GraphQLString } from 'graphql';

const schema = new GraphQLSchema({
  query: new GraphQLObjectType({
    name: 'Query',
    fields: {
      hello: {
        type: GraphQLString,
        resolve: () => 'world',
      },
    },
  }),
});

const app = express();

app.use(
  '/graphql',
  createHandler({ schema, graphiql: true }),
);

// 启动服务器监听
app.listen(4000, () => {
  console.log('GraphQL server running on http://localhost:4000/graphql');
});

验证操作 #

• 安装依赖：执行yarn add express graphql graphql-http
• 启动服务：若使用ES模块，需在package.json中添加"type": "module"，再用node your-file.js运行代码
• 测试界面：访问http://localhost:4000/graphql，输入查询{ hello }即可得到返回结果{ "data": { "hello": "world" } }

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