连接数据库，包括 schema 创建，删除，table 修改

src/components/common/schema/Schema.jsx

@@ -3,462 +3,255 @@ import React, {Component} from 'react';
 import {Row, Col, Input, Icon, Button, Spin} from 'antd';
 import './index.css';
 import SchemaChange from './change/SchemaChange';
-import gql from "graphql-tag";
 import {Mutation, Query} from "react-apollo";
+import {SHOW_SCHEMA, ADD_SCHEMA, DELETE_SCHEMA, SHOW_TABLE} from './gql'
 
 const Search = Input.Search;
 
 const idGen = (kind) => {
-  return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
+    return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
 };
 
-class Schema extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentSchema: '',
-      currentTable: '',
-      schemas: [
-        {
-          name: 'magazineApp',
-          tables: [
-            {
-              name: 'magazine',
-              remark: 'magazine list',
-              cols: [
-                {
-                  name: 'id',
-                  type: 'ID',
-                  desc: 'key'
-                },
-                {
-                  name: 'name',
-                  type: 'string',
-                  desc: 'non-null'
-                },
-                {
-                  name: 'suitableGrade',
-                  type: 'int',
-                  desc: 'non-null-list'
-                },
-                {
-                  name: 'picture',
-                  type: 'string',
-                  desc: 'description'
-                },
-                {
-                  name: 'magazineIntro',
-                  type: 'string',
-                  desc: 'description'
-                },
-                {
-                  name: 'unitPrice',
-                  type: 'float',
-                  desc: 'description'
-                },
-                {
-                  name: 'enableSub',
-                  type: 'int',
-                  desc: 'list'
-                }
-              ]
-            },
-            {
-              name: 'slideshow',
-              remark: 'slideshow list',
-              cols: [
-                {
-                  name: 'id',
-                  type: 'ID',
-                  desc: 'key'
-                },
-                {
-                  name: 'briefIntro',
-                  type: 'string',
-                  desc: 'description'
-                },
-                {
-                  name: 'picture',
-                  type: 'string',
-                  desc: 'description'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          name: 'onlineApp',
-          tables: [
-            {
-              name: 'database',
-              remark: 'database configs',
-              cols: [
-                {
-                  name: 'dbname',
-                  type: 'string',
-                  desc: 'non-null'
-                },
-                {
-                  name: 'dbConfig',
-                  type: 'string',
-                  desc: 'non-null'
-                },
-                {
-                  name: 'createdAt',
-                  type: 'string',
-                  desc: 'description'
-                },
-                {
-                  name: 'updatedAt',
-                  type: 'string',
-                  desc: 'description'
-                }
-              ]
-            },
-            {
-              name: 'deploy',
-              remark: 'deploy\'s collections ',
-              cols: [
-                {
-                  name: 'cloud_id',
-                  type: 'string',
-                  desc: 'non-null'
-                },
-                {
-                  name: 'schema_id',
-                  type: 'string',
-                  desc: 'non-null'
-                },
-                {
-                  name: 'user_id',
-                  type: 'string',
-                  desc: 'description'
-                }
-              ]
-            }
-          ]
-        }
-      ],
-    };
-    if (this.state.schemas.length !== 0) {
-      this.state.currentSchema = this.state.schemas[0].name;
-      this.state.currentTable = this.state.schemas[0].tables[0].name;
-    }
-  }
 
-  addTable = (columns, remark, tableName, schemaName) => {
-    let schemas = this.state.schemas;
-    let targetSchema = schemas.find(obj => obj.name === schemaName);
-    let targetTable = targetSchema.tables.find(obj => obj.name === tableName);
-    if (targetTable === undefined) {
-      targetSchema.tables.push({name: tableName, remark, cols: columns})
-    } else {
-      targetTable.remark = remark;
-      targetTable.cols = columns;
+class Schema extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            currentSchema: '',
+            currentTable: '',
+        };
     }
-    this.setState({
-      schemas
-    })
-  };
 
-  deleteTable = (tableName, schemaName) => {
-    let schemas = this.state.schemas;
-    let targetSchemaIndex = schemas.findIndex(obj => obj.name === schemaName);
-    let targetTableIndex = schemas.find(obj => obj.name === schemaName).tables.findIndex(obj => obj.name === tableName);
-    schemas[targetSchemaIndex].tables.splice(targetTableIndex, 1);
-    this.setState({
-      schemas
-    });
+    findColumns = data => this.state.currentTable === '' ? [] : data.find(table => table.name === this.state.currentTable).cols;
 
-    let tables = this.state.schemas.find(obj => obj.name === this.state.currentSchema).tables;
-    if (tables.length !== 0) {
-      this.setState({
-        currentTable: tables[0].name
-      })
-    } else {
-      this.setState({
-        currentTable: ''
-      })
-    }
-  };
-
-  addSchema = (name) => {
-    this.setState({
-      schemas: [...this.state.schemas, {
-        name,
-        tables: []
-      }]
-    });
-  };
+    findRemark = data => this.state.currentTable === '' ? '' : data.find(table => table.name === this.state.currentTable).remark;
 
-  findColumns = () => {
-    let schema = this.state.schemas.find(schema => schema.name === this.state.currentSchema);
-    if (schema === undefined) return [];
-    //  if user insert a new schema, after merge to schemas with a {name: 'xx', tables: []}
-    //  you can find the following table is undefined.
-    //  so give a state here if you want add a tip!
-    else {
-      let table = schema.tables.find(table => table.name === this.state.currentTable);
-      if (table === undefined) return [];
-      else return table.cols;
-    }
-  };
+    switchSchema = (schema) => {
+        this.setState({
+            currentSchema: schema
+        });
+    };
 
-  findRemark = () => {
-    let schema = this.state.schemas.find(schema => schema.name === this.state.currentSchema);
-    if (schema === undefined) return '';
-    else {
-      let table = schema.tables.find(table => table.name === this.state.currentTable);
-      if (table === undefined) return '';
-      else return table.remark;
-    }
-  };
+    switchTable = (table) => {
+        this.setState({
+            currentTable: table
+        })
 
-  fetchSchemas = (schemas) => {
-    this.setState({
-      schemas
-    })
-  };
+    };
 
-  render() {
-    return (
-        <div>
-          <Row>
-            <Col span={6}>
-              <div className='wrapper'>
-                <div className='current'>{this.state.currentSchema}</div>
-                <AddSchemaInput userID={this.props.userID} addSchema={this.addSchema}/>
-              </div>
-              <ShowSchemaList schemas={this.state.schemas} fetchSchemas={this.fetchSchemas}/>
-            </Col>
+    render() {
+        return (
+            <div>
+                <Row>
+                    <Col span={6}>
+                        <div className='wrapper'>
+                            <div className='current'>{this.state.currentSchema}</div>
+                            <AddSchemaInput userID={this.props.userID}/>
+                        </div>
+                        <ShowSchemaList userID={this.props.userID} switchTable={this.switchTable}
+                                        switchSchema={this.switchSchema}/>
+                    </Col>
 
-            <Col span={17} offset={1}>
-              {
-                this.state.currentTable === 'add' ?
-                    <SchemaChange currentSchema={this.state.currentSchema} columns={[]} remark=''
-                                  addTable={this.addTable}
-                                  deleteTable={this.deleteTable}/> :
-                    <SchemaChange currentSchema={this.state.currentSchema} currentTable={this.state.currentTable}
-                                  columns={this.findColumns()} remark={this.findRemark()} addTable={this.addTable}
-                                  deleteTable={this.deleteTable}/>
-              }
-            </Col>
-          </Row>
-        </div>
-    )
-  }
+                    <Col span={17} offset={1}>
+                        {
+                            this.state.currentTable === 'add' ?
+                                <SchemaChange currentSchema={this.state.currentSchema} columns={[]} remark=''/> :
+                                <Query query={SHOW_TABLE} variables={{schema_id: 'schema_1542006423662_89419168'}}>
+                                    {
+                                        ({loading, error, data}) => {
+                                            if (loading)
+                                                return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
+                                            if (error)
+                                                return 'error';
+                                            data = JSON.parse(data.schema_by_id.schemaData);
+                                            return (
+                                                <SchemaChange currentSchema={this.state.currentSchema}
+                                                              currentTable={this.state.currentTable}
+                                                              columns={this.findColumns(data)}
+                                                              remark={this.findRemark(data)}
+                                                />
+                                            )
+                                        }
+                                    }
+                                </Query>
+                        }
+                    </Col>
+                </Row>
+            </div>
+        )
+    }
 }
 
 export default Schema;
 
 class AddSchemaInput extends Component {
 
-  render() {
-    let varobj = {
-      id: idGen('schema'),
-      user_id: this.props.userID,
-      createdAt: new Date().getTime(),
-      updatedAt: '',
-      schemaState: 'create',
-    };
-
-    const ADD_SCHEMA = gql`
-            mutation SCHEMA($id: ID!, $user_id: String!, $schemaName: String!, $schemaData: String!, $createdAt: String, $updatedAt: String, $schemaState: String) {
-                create_schema(
-                    id: $id,
-                    user_id: $user_id,
-                    schemaName: $schemaName,
-                    createdAt: $createdAt,
-                    updatedAt: $updatedAt,
-                    schemaData: $schemaData,
-                    schemaState: $schemaState
-                ) {
-                    id,
-                    schemaName
-                }
-            }
-        `;
+    render() {
+        let varobj = {
+            id: idGen('schema'),
+            user_id: 'xy_1',
+            createdAt: new Date().getTime(),
+            updatedAt: '',
+            schemaState: 'create',
+            schemaData: JSON.stringify([{name: '', remark: '', cols: []}])
+        };
 
 
-    return (
-        <Mutation mutation={ADD_SCHEMA}>
-          {(create_schema, {loading, error}) => {
-            if (loading)
-              return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
-            if (error)
-              return 'error';
-            return (
-                <div>
-                  <Search
-                      className='add-input'
-                      placeholder="input schema_name"
-                      enterButton="Confirm"
-                      onSearch={value => {
-                        this.setState({
-                          switch: true,
-                          currentSchema: value,
-                          currentTable: ''
-                        });
-                        this.props.addSchema(value);
-                        create_schema({
-                          variables: {
-                            ...varobj,
-                            schemaName: value,
-                            schemaData: JSON.stringify({
-                              name: value,
-                              tables: []
-                            })
-                          }
-                        });
-                      }}
-                  />
-                </div>)
-          }}
-        </Mutation>
-    )
-  }
-}
+        return (
+            <Mutation
+                mutation={ADD_SCHEMA}
+                update={(cache, {data: {create_schema}}) => {
+                    let data = cache.readQuery({query: SHOW_SCHEMA, variables: {user_id: 'xy_1'}});
 
-class ShowSchemaList extends Component {
+                    data.schema_by_props.push(create_schema);
+                    cache.writeQuery({
+                        query: SHOW_SCHEMA,
+                        variables: {user_id: 'xy_1'},
+                        data
+                    });
+                }}
+            >
 
-  switchSchema = (schema) => {
-    return () => {
-      this.setState({
-        currentSchema: schema
-      });
-      // when this schema has no table, show new
-      if (this.state.schemas.find(obj => obj.name === schema).tables.length === 0) {
-        this.setState({
-          currentTable: ''
-        })
-      }
+                {(create_schema, {loading, error}) => {
+                    if (loading)
+                        return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
+                    if (error)
+                        return 'error';
+                    return (
+                        <div>
+                            <Search
+                                className='add-input'
+                                placeholder="input schema_name"
+                                enterButton="Confirm"
+                                onSearch={value => {
+                                    this.setState({
+                                        switch: true,
+                                        currentSchema: value,
+                                        currentTable: ''
+                                    });
+                                    create_schema({
+                                        variables: {
+                                            ...varobj,
+                                            schemaName: value
+                                        }
+                                    });
+                                }}
+                            />
+                        </div>)
+                }}
+            </Mutation>
+        )
     }
-  };
+}
 
-  deleteSchema = (e, schemaName) => {
-    e.stopPropagation();
-    let schemas = this.state.schemas;
-    let targetSchemaIndex = schemas.findIndex(obj => obj.name === schemaName);
-    if (targetSchemaIndex !== -1) {
-      schemas.splice(targetSchemaIndex, 1);
-      this.setState({
-        schemas
-      });
-    }
-    if (this.state.schemas.length !== 0) {
-      this.setState({
-        currentSchema: this.state.schemas[0].name,
-        currentTable: this.state.schemas[0].tables[0] ? this.state.schemas[0].tables[0].name : ''
-      })
-    } else {
-      this.setState({
-        currentSchema: '',
-        currentTable: ''
-      })
+class ShowSchemaList extends Component {
+    constructor() {
+        super();
+        this.state = {
+            currentSchema: '',
+            currentTable: ''
+        }
     }
 
-  };
 
-  switchTable = (table) => {
-    return () => {
-      this.setState({
-        currentTable: table
-      })
-    };
-  };
+    render() {
+        return (
+            <Query query={SHOW_SCHEMA} variables={{user_id: 'xy_1'}}>
 
-  render() {
-    const SHOW_SCHEMA = gql`
-            query SCHEMA($user_id: String) {
-                schema_by_props(user_id: $user_id) {
-                    schemaData
-                    schemaName
-                }
-            }
-        `;
-    return (
-        <Query query={SHOW_SCHEMA} variables={{user_id: this.props.userID}}>
-          {
-            ({loading, error, data}) => {
-              if (loading) {
-                return <Spin style={{marginLeft: 3}}/>
-              }
-              if (error) {
-                return 'error!';
-              }
-              if (data.schema_by_props.length === 0)
-                return (
-                    <div>
-                      <span>no schemas, create one</span>
-                    </div>
-                );
-              else {
-                console.log('getttttttttt', data);
-                let schemas = data.schema_by_props.map(dataSchema =>
-                  JSON.parse(dataSchema.schemaData)
-                );
-                console.log(schemas);
-                // this.props.fetchSchemas(schemas);
-
-                return (
-                    <div>
-                      {
-                        this.props.schemas.map((schema) => {
-                          return <div key={schema.name} className='title' onClick={this.switchSchema(schema.name)}>
-                            <Row>
-                              <Col span={20}>{schema.name}</Col>
-                              <Col span={4}>
-                                <Button onClick={() => this.setState({currentTable: 'add'})} type="primary"
-                                        shape="circle" icon="plus" size='small'/>
-                                <DeleteSchemaButton schemaName={schema.name} deleteSchema={this.deleteSchema}/>
-                              </Col>
-                            </Row>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin style={{marginLeft: 3}}/>
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+                        if (data.schema_by_props.length === 0)
+                            return (
+                                <div>
+                                    <span>no schemas, create one</span>
+                                </div>
+                            );
+                        else {
+                            return (
+                                <div>
+                                    {
+                                        data.schema_by_props.map((schema) => {
+                                            return <div key={schema.schemaName} className='title'
+                                                        onClick={() => {
+                                                            this.props.switchSchema(schema.schemaName)
+                                                        }}>
+                                                <Row>
+                                                    <Col span={20}>{schema.schemaName}</Col>
+                                                    <Col span={4}>
+                                                        <Button onClick={() => this.props.switchTable('add')}
+                                                                type="primary"
+                                                                shape="circle" icon="plus" size='small'/>
+                                                        <DeleteSchemaButton schemaName={schema.schemaName}/>
+                                                    </Col>
+                                                </Row>
 
 
-                            {
-                              schema.tables.map((table) =>
-                                  <p onClick={this.switchTable(table.name)} key={table.name} className='show'>
-                                    <Icon type="ordered-list" theme="outlined"/> {table.name}
-                                    <span className='remark'><i>   {table.remark}</i></span>
-                                  </p>
-                              )
-                            }
-                          </div>
-                        })
-                      }
-                    </div>
-                );
-              }
-            }
-          }
-        </Query>
-    )
-  }
+                                                {
+                                                    JSON.parse(schema.schemaData).map(table => (
+                                                        <p onClick={() => {
+                                                            this.props.switchTable(table.name)
+                                                        }} key={table.name}
+                                                           className='show'>
+                                                            <Icon type="ordered-list" theme="outlined"/> {table.name}
+                                                            <span className='remark'><i>   {table.remark}</i></span>
+                                                        </p>
+                                                    ))
+                                                }
+                                            </div>
+                                        })
+                                    }
+                                </div>
+                            );
+                        }
+                    }
+                }
+            </Query>
+        )
+    }
 }
 
 class DeleteSchemaButton extends Component {
-  render() {
-    const DELETE_SCHEMA = gql`
-            mutation SCHEMA($schemaName: String) {
-                delete_schema(schemaName: $schemaName)
-            }
-        `;
-    return (
-        <Mutation mutation={DELETE_SCHEMA}>
-          {(delete_schema, {loading, error}) => {
-            if (error)
-              return 'error';
-            if (loading)
-              return <Spin style={{marginLeft: 3}}/>;
-            return (
-                <Button onClick={(e) => {
-                  this.props.deleteSchema(e, this.props.schemaName);
-                  delete_schema({variables: {schemaName: this.props.schemaName}});
-                }} type="danger" shape="circle" icon="delete" size='small' style={{marginLeft: 3}}/>
-            )
-          }}
-        </Mutation>
-    )
-  }
+    constructor(props) {
+        super(props);
+        this.state = {
+            schemaName: props.schemaName
+        }
+    }
+
+    render() {
+        return (
+            <Mutation
+                mutation={DELETE_SCHEMA}
+                update={(cache) => {
+                    let data = cache.readQuery({query: SHOW_SCHEMA, variables: {user_id: 'xy_1'}});
+
+                    data.schema_by_props.splice(data.schema_by_props.findIndex(obj => obj.schemaName === this.state.schemaName), 1);
+                    cache.writeQuery({
+                        query: SHOW_SCHEMA,
+                        variables: {user_id: 'xy_1'},
+                        data
+                    });
+                }}
+            >
+                {(delete_schema, {loading, error}) => {
+                    if (error)
+                        return 'error';
+                    if (loading)
+                        return <Spin style={{marginLeft: 3}}/>;
+                    return (
+                        <Button onClick={(e) => {
+                            delete_schema({variables: {schemaName: this.props.schemaName}});
+                        }} type="danger" shape="circle" icon="delete" size='small' style={{marginLeft: 3}}/>
+                    )
+                }}
+            </Mutation>
+        )
+    }
 }
 

src/components/common/schema/change/SchemaChange.jsx

@@ -1,7 +1,9 @@
 import React, {Component} from 'react';
 
-import {Select, Input, Icon, Button, notification} from 'antd';
-import gql from "graphql-tag";
+import {Select, Input, Icon, Button, notification, Spin} from 'antd';
+import {UPDATE_SCHEMA, SHOW_SCHEMA, SHOW_TABLE} from "../gql";
+
+import {Mutation, Query} from "react-apollo";
 
 const Option = Select.Option;
 
@@ -97,74 +99,72 @@ class SchemaChange extends Component {
     render() {
         return (
             <div style={{margin: 20}}>
-              <div style={{marginBottom: 20}}>
-                <span className='table-title'> Table name</span>
-                <Input value={this.state.currentTable} placeholder="table_name" style={{width: 120}} onChange={(e) => {
-                    this.setState({currentTable: e.target.value})
-                }}/>
-
-              </div>
-
-              <div style={{marginBottom: 20}}>
-                <span className='table-title'> Table remark</span>
-                <Input value={this.state.remark} placeholder="table_remark" style={{width: 250}} onChange={(e) => {
-                    this.setState({remark: e.target.value})
-                }}/>
-              </div>
-
-              <div>
-                <span className='table-title'> Table columns</span>
-                <span className='column-title'>name</span>
-                <span className='column-title'>type</span>
-                <span className='column-title'>description</span>
-                  {
-                      this.state.columns.map((col, index) =>
-                          <div key={index} style={{marginBottom: 3}}>
-                            <Input style={{width: 120, marginRight: 10}} value={col.name} onChange={this.handleNameChange(index)}/>
-                            <Select defaultValue={col.type} style={{width: 120, marginRight: 10}}
-                                    onChange={this.handleTypeChange(index)}>
-                                {
-                                    this.state.types.map((value) =>
-                                        <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
-                                    )
-                                }
-                            </Select>
-                            <Select defaultValue={col.desc} style={{width: 120, marginRight: 10}}
-                                    onChange={this.handleDescChange(index)}>
-                                {
-                                    this.state.descriptions.map((value) =>
-                                        <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
-                                    )
-                                }
-                            </Select>
-                            <Icon type="delete" theme="outlined" style={{cursor: 'pointer'}}
-                                  onClick={this.handleColDelete(index)}/>
-                          </div>
-                      )
-                  }
+                <div style={{marginBottom: 20}}>
+                    <span className='table-title'> Table name</span>
+                    <Input value={this.state.currentTable} placeholder="table_name" style={{width: 120}}
+                           onChange={(e) => {
+                               this.setState({currentTable: e.target.value})
+                           }}/>
+
+                </div>
+
+                <div style={{marginBottom: 20}}>
+                    <span className='table-title'> Table remark</span>
+                    <Input value={this.state.remark} placeholder="table_remark" style={{width: 250}} onChange={(e) => {
+                        this.setState({remark: e.target.value})
+                    }}/>
+                </div>
+
                 <div>
-                  <Input placeholder="column_name" style={{width: 120, marginRight: 10}} onChange={this.handleNameNew}
-                         value={this.state.newColName}/>
-                  <Select defaultValue="type" style={{width: 120, marginRight: 10}} onChange={this.handleTypeNew}
-                          value={this.state.newColType}>
-                      {
-                          this.state.types.map((value) =>
-                              <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
-                          )
-                      }
-                  </Select>
+                    <span className='table-title'> Table columns</span>
+                    <span className='column-title'>name</span>
+                    <span className='column-title'>type</span>
+                    <span className='column-title'>description</span>
+                    {
+                        this.state.columns.map((col, index) =>
+                            <div key={index} style={{marginBottom: 3}}>
+                                <Input style={{width: 120, marginRight: 10}} value={col.name}
+                                       onChange={this.handleNameChange(index)}/>
+                                <Select defaultValue={col.type} style={{width: 120, marginRight: 10}}
+                                        onChange={this.handleTypeChange(index)}>
+                                    {
+                                        this.state.types.map((value) =>
+                                            <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
+                                        )
+                                    }
+                                </Select>
+                                <Select defaultValue={col.description} style={{width: 120, marginRight: 10}}
+                                        onChange={this.handleDescChange(index)}>
+                                    {
+                                        this.state.descriptions.map((value) =>
+                                            <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
+                                        )
+                                    }
+                                </Select>
+                                <Icon type="delete" theme="outlined" style={{cursor: 'pointer'}}
+                                      onClick={this.handleColDelete(index)}/>
+                            </div>
+                        )
+                    }
+                    <div>
+                        <Input placeholder="column_name" style={{width: 120, marginRight: 10}}
+                               onChange={this.handleNameNew}
+                               value={this.state.newColName}/>
+                        <Select defaultValue="type" style={{width: 120, marginRight: 10}} onChange={this.handleTypeNew}
+                                value={this.state.newColType}>
+                            {
+                                this.state.types.map((value) =>
+                                    <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
+                                )
+                            }
+                        </Select>
+                    </div>
+                </div>
+                <div style={{marginTop: 20}}>
+                    <UpdateTableButton currentTable={this.state.currentTable} columns={this.state.columns}
+                                       remark={this.state.remark}/>
+                    <DeleteTableButton/>
                 </div>
-              </div>
-              <div style={{marginTop: 10}}>
-                <Button type="primary" onClick={() => {
-                    this.props.addTable(this.state.columns, this.state.remark, this.state.currentTable, this.state.currentSchema);
-                }}>
-                  SUBMIT
-                </Button>
-                <Button style={{marginLeft: 10}} type="danger" onClick={() => {
-                    this.props.deleteTable(this.state.currentTable, this.state.currentSchema);
-                }}>DELETE</Button>
-              </div>
             </div>
         )
     }
@@ -173,11 +173,90 @@ class SchemaChange extends Component {
 export default SchemaChange;
 
 
-// 先搞定 showSchema 再来搞这个
+class UpdateTableButton extends Component {
+
+    render() {
+        let varobj = {
+            id: 'schema_1542006423662_89419168',
+            updatedAt: new Date().getTime(),
+            schemaState: 'updated',
+        };
+
+        return (
+            <Query query={SHOW_TABLE} variables={{schema_id: 'schema_1542006423662_89419168'}}>
+
+                {
+                    ({loading, error, data}) => {
+                        if (loading)
+                            return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
+                        if (error)
+                            return 'error';
+
+                        let schemaData = data;
 
-class UpdateSchemaButtons extends Component {
+                        return (
+                            <Mutation
+                                mutation={UPDATE_SCHEMA}
+                                update={(cache, {data: {update_schema}}) => {
+                                    let data = cache.readQuery({
+                                        query: SHOW_TABLE,
+                                        variables: {schema_id: 'schema_1542006423662_89419168'}
+                                    });
 
-//   update_schema(
+                                    console.log('data', data);
+                                    console.log('update_schema', update_schema);
+
+                                    data.schema_by_id = update_schema;
+                                    cache.writeQuery({
+                                        query: SHOW_TABLE,
+                                        variables: {schema_id: 'schema_1542006423662_89419168'},
+                                        data
+                                    });
+                                }}
+                            >
+
+                                {(update_schema, {loading, error}) => {
+                                    if (loading)
+                                        return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
+                                    if (error)
+                                        return 'error';
+
+                                    // 先 query 再 mutation，然后替换
+                                    let schemaCols = JSON.parse(schemaData.schema_by_id.schemaData);
+                                    let newTable = {
+                                        name: this.props.currentTable,
+                                        remark: this.props.remark,
+                                        cols: this.props.columns
+                                    };
+                                    schemaCols.splice(schemaCols.findIndex(table=> table.name === this.props.currentTable), 1, newTable);
+
+                                    return (
+                                        <div style={{display: 'inline-block'}}>
+                                            <Button type="primary" onClick={() => {
+                                                update_schema({
+                                                    variables: {
+                                                        ...varobj,
+                                                        schemaData: JSON.stringify(schemaCols)
+                                                    }
+                                                });
+                                            }}>
+                                                SUBMIT
+                                            </Button>
+                                        </div>
+                                    )
+                                }}
+                            </Mutation>
+                        )
+                    }
+                }
+
+            </Query>
+        )
+    }
+}
+
+class DeleteTableButton extends Component {
+    //   update_schema(
 //     createdAt: String
 //   id: ID!
 //   schemaData: String
@@ -187,33 +266,63 @@ class UpdateSchemaButtons extends Component {
 //   user_id: String
 // ): Schema
 
-
-    render(){
+    render() {
         let varobj = {
-            user_id: this.props.userID,
+            id: 'schema_1542006423662_89419168',
             updatedAt: new Date().getTime(),
             schemaState: 'updated',
-            id: this.props.schemaID
         };
 
-        const ADD_SCHEMA = gql`
-            mutation SCHEMA($id: ID!, $user_id: String!, $schemaName: String!, $schemaData: String!, $createdAt: String, $updatedAt: String, $schemaState: String) {
-                update_schema(
-                    id: $id,
-                    user_id: $user_id,
-                    schemaName: $schemaName,
-                    createdAt: $createdAt,
-                    updatedAt: $updatedAt,
-                    schemaData: $schemaData,
-                    schemaState: $schemaState
-                ) {
-                    id,
-                    schemaName
-                }
-            }
-        `;
         return (
-            <div>1</div>
+            <Mutation
+                mutation={UPDATE_SCHEMA}
+                update={(cache, {data: {update_schema}}) => {
+                    let data = cache.readQuery({
+                        query: SHOW_TABLE,
+                        variables: {schema_id: 'schema_1542006423662_89419168'}
+                    });
+
+                    console.log('data', data);
+                    console.log('update_schema', update_schema);
+
+                    data.schema_by_id = update_schema;
+                    cache.writeQuery({
+                        query: SHOW_TABLE,
+                        variables: {schema_id: 'schema_1542006423662_89419168'},
+                        data
+                    });
+                }}
+            >
+
+                {(update_schema, {loading, error}) => {
+                    if (loading)
+                        return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
+                    if (error)
+                        return 'error';
+                    return (
+                        <div style={{display: 'inline-block', marginLeft: 10}}>
+
+                            <Button type="danger" onClick={() => {
+                                update_schema({
+                                    variables: {
+                                        ...varobj,
+                                        schemaData: JSON.stringify({
+                                            name: 'dsdsddsds',
+                                            remark: 'sas',
+                                            cols: [
+                                                {name: '1234', type: 'int', description: 'description'},
+                                                {name: '5678', type: 'int', description: 'non-null'}
+                                            ]
+                                        })
+                                    }
+                                });
+                            }}>
+                                DELETE
+                            </Button>
+                        </div>
+                    )
+                }}
+            </Mutation>
         )
     }
 }

src/components/common/schema/gql.js

@@ -0,0 +1,57 @@
+import gql from "graphql-tag";
+const SHOW_SCHEMA = gql`
+            query SCHEMA($user_id: String) {
+                schema_by_props(user_id: $user_id) {
+                    schemaData
+                    schemaName
+                }
+            }
+        `;
+
+const ADD_SCHEMA = gql`
+            mutation SCHEMA($id: ID!, $user_id: String!, $schemaName: String!, $schemaData: String!, $createdAt: String, $updatedAt: String, $schemaState: String) {
+                create_schema(
+                    id: $id,
+                    user_id: $user_id,
+                    schemaName: $schemaName,
+                    createdAt: $createdAt,
+                    updatedAt: $updatedAt,
+                    schemaData: $schemaData,
+                    schemaState: $schemaState
+                ) {
+                    schemaName,
+                    schemaData
+                }
+            }
+        `;
+
+const DELETE_SCHEMA = gql`
+            mutation SCHEMA($schemaName: String) {
+                delete_schema(schemaName: $schemaName)
+            }
+        `;
+
+const UPDATE_SCHEMA = gql`
+            mutation SCHEMA($id: ID!, $schemaData: String!, $updatedAt: String, $schemaState: String) {
+                update_schema(
+                    id: $id,
+                    updatedAt: $updatedAt,
+                    schemaData: $schemaData,
+                    schemaState: $schemaState
+                ) {
+                    schemaName,
+                    schemaData
+                }
+            }
+        `;
+
+
+const SHOW_TABLE = gql`
+            query TABLE($schema_id: ID!) {
+                schema_by_id(id: $schema_id) {
+                    schemaData
+                }
+            }
+        `;
+
+export {SHOW_SCHEMA, ADD_SCHEMA, DELETE_SCHEMA, UPDATE_SCHEMA, SHOW_TABLE}

src/index.js

@@ -9,7 +9,7 @@ import { ApolloProvider } from "react-apollo";
 
 //如果浏览器没有自带intl，则需要在使用npm安装intl之后添加如下代码
 import { IntlProvider,addLocaleData } from 'react-intl';
-import intl from 'intl';
+// import intl from 'intl';
 import zh from 'react-intl/locale-data/zh';
 import en from 'react-intl/locale-data/en';
 import zh_CN from './language/zh_CN.js';
@@ -18,8 +18,8 @@ addLocaleData([...en,...zh]);
 
 
 const client = new ApolloClient({
-  // uri: "http://service-eucrnpse-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql"
-  uri: "http://localhost:4000/graphql"
+  uri: "http://service-eucrnpse-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql"
+  // uri: "http://localhost:4000/graphql"
 });
 
 let browserLanguage = (navigator.language || navigator.browserLanguage).toLowerCase().split('-')[0];