online/src/app/graphqlService/component/graphql/Graphql.jsx

import React, {Component} from 'react';
import { Input, Alert} from 'antd';
import GraphiQL from "graphiql";
import fetch from "isomorphic-fetch";
import {graphqlUrl} from "../../../../config";

class Graphql extends Component {

  constructor() {
    super();
    this.state = {
      // api: 'http://service-hnqzcew1-1254337200.ap-beijing.apigateway.myqcloud.com/release/graphql',
      // api: 'http://service-4i9xdoqo-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql',
      // api: 'http://service-ci2tk8iu-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql',
      // 便于开发调试，请删除并换成上面
      api: graphqlUrl
      // api: 'http://service-28dm054z-1254337200.ap-shanghai.apigateway.myqcloud.com/release/graphql'
      // api: 'http://service-acb8p44v-1254337200.ap-beijing.apigateway.myqcloud.com/release/graphql'

    }
  };

  graphQLFetcher = (graphQLParams) => {
    // 已经存在的 magazine api， 设想: 用户生成 schema，返回 api 自动替换这里
    return fetch(this.state.api, {
      method: 'post',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(graphQLParams),
    }).then(response => response.json());
  };

  render() {
    return (
      <div>
        <Alert message="下面的 graphql api 对应的是是 online 的数据库"
               type="warning" banner closable/>
        <Input style={{marginTop: 10}} addonBefore="POST" defaultValue={this.state.api}
               onChange={(e) => {
                 this.setState({api: e.target.value})
               }}/>
        <GraphiQL fetcher={this.graphQLFetcher}/>
      </div>
    )
  }

}

export default Graphql;