使用 node.js 服务器只需使用 express-graphql 命令。它可以自动呈现 GraphiQL。 使用另一个GraphQL服务GraphiQL很容易建立起来。 使用 npm:

npm install --save graphiql

或者，如果你使用的是 yarn ：

yarn add graphiql

GraphiQL提供一个响应组件，负责呈现 UI，应该提供一个可以从GraphQL获取的函数：

importreactfrom'react';importReactdomfrom'react-dom';importGraphiQLfrom'graphiql';importfetchfrom'isomorphic-fetch';functiongraphQLFetcher(graphQLParams) {
 returnfetch(window.location.origin+'/graphql', {
 method:'post',
 headers: { 'Content-Type':'application/json' },
 body:JSON.stringify(graphQLParams),
 }).then(response=>response.json());
}ReactDOM.render(<GraphiQL fetcher={graphQLFetcher} />, document.body);

特性

• 语法高亮显示
• 在字段。参数。类型和更多的前面输入智能类型。
• 实时错误突出显示和报告。
• 自动查询完成。
• 运行并检查查询结果。
• 
  

用法

GraphiQL导出一个单独的响应组件，该组件用于包含整个浏览器 viewport。 这里响应组件呈现GraphiQL编辑器。

importGraphiQLfrom'graphiql';<GraphiQL />

GraphiQL支持用户界面和行为的定制，通过接受 React props。

链接: https://www.fly63.com/nav/2090