如何在express-graphql中集成使用graphiql-explorer插件

默认express-graphql内置的GraphiQL是预编译的固定版本，不支持直接扩展插件，你需要自定义GraphiQL前端页面来集成graphiql-explorer，具体步骤如下：

步骤1：调整服务端基础配置 #

首先修改原有服务代码，关闭内置GraphiQL，保留GraphQL查询接口的POST能力，新增自定义GraphiQL页面的路由：

var express = require('express');
var { graphqlHTTP } = require('express-graphql');
var { buildSchema } = require('graphql');

// Construct a schema, using GraphQL schema language
var schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// The root provides a resolver function for each API endpoint
var root = {
  hello: () => {
    return 'Hello world!';
  },
};

var app = express();
// 新增：解析POST请求的JSON body
app.use(express.json());
// 关闭内置GraphiQL，仅保留查询接口能力
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: false,
}));

// 新增自定义GraphiQL页面的GET路由
app.get('/graphql', (req, res) => {
  res.send(`
<!DOCTYPE html>
<html lang="en">
<head>
  <title>GraphiQL with Explorer</title>
  <style>
    body { height: 100%; margin: 0; width: 100%; overflow: hidden; }
    #graphiql { height: 100vh; }
  </style>
  <!-- 引入GraphiQL样式 -->
  <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
  <!-- 引入GraphiQL Explorer样式 -->
  <link rel="stylesheet" href="https://unpkg.com/graphiql-explorer/graphiql-explorer.css" />
</head>
<body>
  <div id="graphiql">Loading...</div>
  <!-- 引入React、ReactDOM依赖 -->
  <script crossorigin src="https://unpkg.com/react/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
  <!-- 引入GraphiQL和Explorer依赖 -->
  <script src="https://unpkg.com/graphiql/graphiql.min.js"></script>
  <script src="https://unpkg.com/graphiql-explorer/graphiql-explorer.min.js"></script>

  <script>
    function GraphiQLWithExplorer() {
      const [query, setQuery] = React.useState('query { hello }');
      // 定义GraphQL查询请求逻辑
      const fetcher = (graphQLParams) => fetch('/graphql', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(graphQLParams),
      }).then(res => res.json());

      return React.createElement(GraphiQL, {
        fetcher,
        query,
        onEditQuery: setQuery,
        // 注入Explorer插件
        children: React.createElement(GraphiQLExplorer, {
          query,
          onEdit: setQuery,
        })
      });
    }

    ReactDOM.render(
      React.createElement(GraphiQLWithExplorer),
      document.getElementById('graphiql')
    );
  </script>
</body>
</html>
  `);
});

app.listen(4000);
console.log('Running a GraphQL API server at http://localhost:4000/graphql');

效果对比 #

• 当前默认运行界面：
  
• 配置完成后的目标效果：
  

注意事项 #

• 如果你的环境不能访问外网CDN，可以将对应依赖下载到本地静态资源目录，修改HTML中的引入路径即可
• 若需要自定义Explorer的交互行为，可以修改GraphiQLExplorer组件的传入参数，支持配置是否显示字段描述、默认折叠状态等属性

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