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(props) {
        super(props);
        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: props.api ? props.api : 'http://service-7po2y2xb-1254337200.ap-beijing.apigateway.myqcloud.com/graphql'
            // api: 'http://service-28dm054z-1254337200.ap-shanghai.apigateway.myqcloud.com/release/graphql'
            // api: 'http://service-acb8p44v-1254337200.ap-beijing.apigateway.myqcloud.com/release/graphql'

        }
    };

    componentWillReceiveProps(next) {
        this.setState({
            api: next.api ? next.api : 'http://service-7po2y2xb-1254337200.ap-beijing.apigateway.myqcloud.com/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="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;