删除 table 无效，只能指定一个 user 和 一个schema

src/components/common/schema/Schema.jsx

@@ -19,6 +19,7 @@ class Schema extends Component {
         this.state = {
             currentSchema: '',
             currentTable: '',
+            schemaID: 'schema_1542073902985_52726425'
         };
     }
 
@@ -36,7 +37,6 @@ class Schema extends Component {
         this.setState({
             currentTable: table
         })
-
     };
 
     render() {
@@ -55,20 +55,27 @@ class Schema extends Component {
                     <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'}}>
+                                <SchemaChange currentSchema={this.state.currentSchema} currentTableIndex={-2}
+                                              columns={[]} remark=''/> :
+                                <Query query={SHOW_TABLE}
+                                       variables={{schema_id: 'schema_1542073902985_52726425'}}>
                                     {
                                         ({loading, error, data}) => {
                                             if (loading)
                                                 return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
                                             if (error)
                                                 return 'error';
+                                            console.log('raw-data', data);
                                             data = JSON.parse(data.schema_by_id.schemaData);
+                                            console.log('schema_by_id', data);
                                             return (
-                                                <SchemaChange currentSchema={this.state.currentSchema}
-                                                              currentTable={this.state.currentTable}
-                                                              columns={this.findColumns(data)}
-                                                              remark={this.findRemark(data)}
+                                                <SchemaChange
+                                                    currentSchema={this.state.currentSchema}
+                                                    currentTable={this.state.currentTable}
+                                                    currentTableIndex={this.state.currentTable === '' ? -2 : data.findIndex(obj => obj.name === this.state.currentTable)}
+                                                    columns={this.findColumns(data)}
+                                                    remark={this.findRemark(data)}
+                                                    schemaID={this.state.schemaID}
                                                 />
                                             )
                                         }
@@ -93,7 +100,7 @@ class AddSchemaInput extends Component {
             createdAt: new Date().getTime(),
             updatedAt: '',
             schemaState: 'create',
-            schemaData: JSON.stringify([{name: '', remark: '', cols: []}])
+            schemaData: JSON.stringify([])
         };
 
 
@@ -103,6 +110,8 @@ class AddSchemaInput extends Component {
                 update={(cache, {data: {create_schema}}) => {
                     let data = cache.readQuery({query: SHOW_SCHEMA, variables: {user_id: 'xy_1'}});
 
+                    // console.log('showSchemaData', data);
+
                     data.schema_by_props.push(create_schema);
                     cache.writeQuery({
                         query: SHOW_SCHEMA,
@@ -145,15 +154,6 @@ class AddSchemaInput extends Component {
 }
 
 class ShowSchemaList extends Component {
-    constructor() {
-        super();
-        this.state = {
-            currentSchema: '',
-            currentTable: ''
-        }
-    }
-
-
     render() {
         return (
             <Query query={SHOW_SCHEMA} variables={{user_id: 'xy_1'}}>
@@ -180,6 +180,7 @@ class ShowSchemaList extends Component {
                                             return <div key={schema.schemaName} className='title'
                                                         onClick={() => {
                                                             this.props.switchSchema(schema.schemaName)
+
                                                         }}>
                                                 <Row>
                                                     <Col span={20}>{schema.schemaName}</Col>
@@ -194,10 +195,12 @@ class ShowSchemaList extends Component {
 
                                                 {
                                                     JSON.parse(schema.schemaData).map(table => (
-                                                        <p onClick={() => {
-                                                            this.props.switchTable(table.name)
-                                                        }} key={table.name}
-                                                           className='show'>
+                                                        <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>

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

@@ -23,6 +23,9 @@ class SchemaChange extends Component {
     }
 
 
+    // 下面的 handlexxxx 全是 state 内部方法，用于操作视图
+    // cache 仅在提交删除整体使用
+
     handleNameChange = (index) => {
         return (e) => {
             let columns = this.state.columns;
@@ -161,9 +164,18 @@ class SchemaChange extends Component {
                     </div>
                 </div>
                 <div style={{marginTop: 20}}>
-                    <UpdateTableButton currentTable={this.state.currentTable} columns={this.state.columns}
-                                       remark={this.state.remark}/>
-                    <DeleteTableButton/>
+                    <UpdateTableButton
+                        currentTable={this.state.currentTable}
+                        columns={this.state.columns}
+                        remark={this.state.remark}
+                        currentTableIndex={this.props.currentTableIndex}
+                        schemaID={this.props.schemaID}
+
+                    />
+                    <DeleteTableButton
+                        currentTableIndex={this.props.currentTableIndex}
+                        schemaID = {this.props.schemaID}
+                    />
                 </div>
             </div>
         )
@@ -176,14 +188,19 @@ export default SchemaChange;
 class UpdateTableButton extends Component {
 
     render() {
+        let schemaID = this.props.schemaID;
+
         let varobj = {
-            id: 'schema_1542006423662_89419168',
+            id: schemaID,
             updatedAt: new Date().getTime(),
-            schemaState: 'updated',
+            schemaState: 'updated-update-table',
         };
 
+        // console.log(this.props.currentTable);
+        // console.log(this.props.currentSchema);
+
         return (
-            <Query query={SHOW_TABLE} variables={{schema_id: 'schema_1542006423662_89419168'}}>
+            <Query query={SHOW_TABLE} variables={{schema_id: schemaID}}>
 
                 {
                     ({loading, error, data}) => {
@@ -200,18 +217,37 @@ class UpdateTableButton extends Component {
                                 update={(cache, {data: {update_schema}}) => {
                                     let data = cache.readQuery({
                                         query: SHOW_TABLE,
-                                        variables: {schema_id: 'schema_1542006423662_89419168'}
+                                        variables: {schema_id: schemaID}
                                     });
 
-                                    console.log('data', data);
-                                    console.log('update_schema', update_schema);
+                                    let showSchemaData = cache.readQuery({
+                                        query: SHOW_SCHEMA,
+                                        variables: {user_id: 'xy_1'}
+                                    });
+                                    let index = showSchemaData.schema_by_props.findIndex(obj => obj.schemaName === update_schema.schemaName);
+                                    // console.log('我是',index);
+                                    // console.log('test', update_schema);
+                                    // console.log('testss', showSchemaData.schema_by_props);
+
+                                    showSchemaData.schema_by_props.splice(index, 1, update_schema);
+
+                                    console.log('showTableData', 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
-                                    });
+
+                                    cache.writeQuery(
+                                        {
+                                            query: SHOW_TABLE,
+                                            variables: {schema_id: schemaID},
+                                            data
+                                        },
+                                        {
+                                            query: SHOW_SCHEMA,
+                                            variables: {user_id: 'xy_1'},
+                                            showSchemaData
+                                        }
+                                    );
                                 }}
                             >
 
@@ -221,14 +257,24 @@ class UpdateTableButton extends Component {
                                     if (error)
                                         return 'error';
 
-                                    // 先 query 再 mutation，然后替换
+
+                                    // 更新代码
+                                    // 先 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);
+                                    const index = this.props.currentTableIndex;
+                                    if (index === -2) {
+                                        schemaCols.push(newTable);
+                                    } else if (index === -1) {
+                                        console.log('未知错误，数据库信息不匹配');
+                                    } else {
+                                        schemaCols.splice(index, 1, newTable);
+                                    }
+
 
                                     return (
                                         <div style={{display: 'inline-block'}}>
@@ -256,73 +302,88 @@ class UpdateTableButton extends Component {
 }
 
 class DeleteTableButton extends Component {
-    //   update_schema(
-//     createdAt: String
-//   id: ID!
-//   schemaData: String
-//   schemaName: String
-//   schemaState: String
-//   updatedAt: String
-//   user_id: String
-// ): Schema
-
     render() {
+        let schemaID = this.props.schemaID;
+
         let varobj = {
             id: 'schema_1542006423662_89419168',
             updatedAt: new Date().getTime(),
-            schemaState: 'updated',
+            schemaState: 'updated-delete-table',
         };
 
         return (
-            <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'}
-                                            ]
-                                        })
+            <Query query={SHOW_TABLE} variables={{schema_id: schemaID}}>
+
+                {
+                    ({loading, error, data}) => {
+                        if (loading)
+                            return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
+                        if (error)
+                            return 'error';
+
+                        let schemaData = data;
+
+                        return (
+                            <Mutation
+                                mutation={UPDATE_SCHEMA}
+                                update={(cache, {data: {update_schema}}) => {
+                                    let data = cache.readQuery({
+                                        query: SHOW_TABLE,
+                                        variables: {schema_id: schemaID}
+                                    });
+
+                                    // console.log('data', data);
+                                    // console.log('update_schema', update_schema);
+
+                                    data.schema_by_id = update_schema;
+                                    cache.writeQuery({
+                                        query: SHOW_TABLE,
+                                        variables: {schema_id: schemaID},
+                                        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);
+                                    console.log('删除之前的 schemaCols', schemaCols);
+                                    const index = this.props.currentTableIndex;
+                                    if (index === -2) {
+                                        console.log('初始页面')
+                                    } else if (index === -1) {
+                                        console.log('未知错误，数据库信息不匹配');
+                                    } else {
+                                        schemaCols.splice(index, 1);
                                     }
-                                });
-                            }}>
-                                DELETE
-                            </Button>
-                        </div>
-                    )
-                }}
-            </Mutation>
+                                    console.log('删除之后的 schemaCols', schemaCols);
+
+                                    return (
+                                        <div style={{display: 'inline-block'}}>
+                                            <Button type="danger" onClick={() => {
+                                                update_schema({
+                                                    variables: {
+                                                        ...varobj,
+                                                        schemaData: JSON.stringify(schemaCols)
+                                                    }
+                                                });
+                                            }}>
+                                                DELETE
+                                            </Button>
+                                        </div>
+                                    )
+                                }}
+                            </Mutation>
+                        )
+                    }
+                }
+
+            </Query>
         )
     }
 }

src/components/common/schema/gql.js

@@ -4,6 +4,7 @@ const SHOW_SCHEMA = gql`
                 schema_by_props(user_id: $user_id) {
                     schemaData
                     schemaName
+                    
                 }
             }
         `;