需求变化，作为保存。1. config 无需一对多。 2. state 无需维持。 该版本最后位置，add Schema 的 apollo 使用上产生问题。

.idea/workspace.xml

@@ -2,14 +2,7 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="93d86d6a-0860-401c-996e-30fc26553ffc" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/.idea/misc.xml" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/.idea/vcs.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/logo.png" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/logo.png" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/app/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/index.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.css" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.js" afterDir="false" />
     </list>
     <ignored path="$PROJECT_DIR$/.tmp/" />
     <ignored path="$PROJECT_DIR$/temp/" />
@@ -40,7 +33,7 @@
           <entry key="json" value="5" />
           <entry key="lock" value="3" />
           <entry key="png" value="3" />
-          <entry key="ts" value="1" />
+          <entry key="ts" value="2" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.open">
@@ -50,7 +43,7 @@
           <entry key="Image" value="4" />
           <entry key="JSON" value="5" />
           <entry key="JavaScript" value="23" />
-          <entry key="TypeScript" value="1" />
+          <entry key="TypeScript" value="2" />
           <entry key="yarn.lock" value="3" />
         </counts>
       </usages-collector>
@@ -63,14 +56,14 @@
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
           <entry key="css" value="482" />
-          <entry key="js" value="15570" />
+          <entry key="js" value="16735" />
           <entry key="ts" value="14" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
           <entry key="CSS" value="482" />
-          <entry key="JavaScript" value="15570" />
+          <entry key="JavaScript" value="16735" />
           <entry key="TypeScript" value="14" />
         </counts>
       </usages-collector>
@@ -81,11 +74,10 @@
       <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/src/app/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="555">
-              <caret line="297" column="43" selection-start-line="297" selection-start-column="43" selection-end-line="297" selection-end-column="43" />
+            <state relative-caret-position="654">
+              <caret line="430" column="27" lean-forward="true" selection-start-line="430" selection-start-column="27" selection-end-line="430" selection-end-column="27" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
-                <element signature="e#501#3915#0" />
                 <element signature="e#648#757#0" />
                 <element signature="e#775#895#0" />
                 <element signature="e#913#1044#0" />
@@ -105,22 +97,22 @@
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/node_modules/react-apollo/Query.d.ts">
+        <entry file="file://$PROJECT_DIR$/node_modules/react-apollo/Mutation.d.ts">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="1045">
-              <caret line="55" column="28" selection-start-line="55" selection-start-column="19" selection-end-line="55" selection-end-column="28" />
-              <folding>
-                <element signature="e#0#31#0" expanded="true" />
-              </folding>
+            <state relative-caret-position="1178">
+              <caret line="67" column="25" selection-start-line="67" selection-start-column="25" selection-end-line="67" selection-end-column="25" />
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/yarn.lock">
+        <entry file="file://$PROJECT_DIR$/node_modules/react-apollo/Query.d.ts">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="589">
-              <caret line="31" column="29" lean-forward="true" selection-start-line="31" selection-start-column="29" selection-end-line="31" selection-end-column="29" />
+            <state relative-caret-position="1045">
+              <caret line="55" column="28" selection-start-line="55" selection-start-column="19" selection-end-line="55" selection-end-column="28" />
+              <folding>
+                <element signature="e#0#31#0" expanded="true" />
+              </folding>
             </state>
           </provider>
         </entry>
@@ -184,8 +176,8 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/schema/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="145">
-              <caret line="69" column="22" lean-forward="true" selection-start-line="69" selection-start-column="22" selection-end-line="69" selection-end-column="22" />
+            <state relative-caret-position="618">
+              <caret line="65" column="33" lean-forward="true" selection-start-line="65" selection-start-column="33" selection-end-line="65" selection-end-column="33" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
               </folding>
@@ -226,6 +218,7 @@
       <find>console.log</find>
       <find>api</find>
       <find>style</find>
+      <find>login</find>
     </findStrings>
   </component>
   <component name="Git.Settings">
@@ -278,8 +271,8 @@
     </packageJsonPaths>
   </component>
   <component name="ProjectFrameBounds">
-    <option name="x" value="469" />
-    <option name="y" value="76" />
+    <option name="x" value="216" />
+    <option name="y" value="65" />
     <option name="width" value="2063" />
     <option name="height" value="1341" />
   </component>
@@ -321,13 +314,6 @@
               <item name="src" type="462c0819:PsiDirectoryNode" />
               <item name="schema" type="462c0819:PsiDirectoryNode" />
             </path>
-            <path>
-              <item name="online" type="b2602c69:ProjectViewProjectNode" />
-              <item name="online" type="462c0819:PsiDirectoryNode" />
-              <item name="src" type="462c0819:PsiDirectoryNode" />
-              <item name="schema" type="462c0819:PsiDirectoryNode" />
-              <item name="change" type="462c0819:PsiDirectoryNode" />
-            </path>
           </expand>
           <select />
         </subPane>
@@ -381,18 +367,18 @@
       <updated>1540954591627</updated>
       <workItem from="1540954593719" duration="75927000" />
       <workItem from="1541378899580" duration="1667000" />
-      <workItem from="1541395110197" duration="14427000" />
+      <workItem from="1541395110197" duration="23076000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="92021000" />
+    <option name="totallyTimeSpent" value="100670000" />
   </component>
   <component name="ToolWindowManager">
-    <frame x="469" y="76" width="2063" height="1341" extended-state="0" />
+    <frame x="216" y="65" width="2063" height="1341" extended-state="0" />
     <editor active="true" />
     <layout>
-      <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.12340842" />
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.12340842" />
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
       <window_info id="npm" order="2" side_tool="true" />
       <window_info id="Favorites" order="3" side_tool="true" />
@@ -407,7 +393,7 @@
       <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
       <window_info anchor="bottom" id="Version Control" order="8" show_stripe_button="false" />
       <window_info anchor="bottom" id="Event Log" order="9" side_tool="true" />
-      <window_info active="true" anchor="bottom" id="Terminal" order="10" visible="true" weight="0.26421136" />
+      <window_info anchor="bottom" id="Terminal" order="10" visible="true" weight="0.26421136" />
       <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
       <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
       <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
@@ -545,33 +531,39 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/schema/index.js">
+    <entry file="file://$PROJECT_DIR$/src/schema/change/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="145">
-          <caret line="69" column="22" lean-forward="true" selection-start-line="69" selection-start-column="22" selection-end-line="69" selection-end-column="22" />
+        <state relative-caret-position="508">
+          <caret line="108" column="38" lean-forward="true" selection-start-line="108" selection-start-column="38" selection-end-line="108" selection-end-column="38" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/schema/change/index.js">
+    <entry file="file://$PROJECT_DIR$/src/schema/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="508">
-          <caret line="108" column="38" lean-forward="true" selection-start-line="108" selection-start-column="38" selection-end-line="108" selection-end-column="38" />
+        <state relative-caret-position="618">
+          <caret line="65" column="33" lean-forward="true" selection-start-line="65" selection-start-column="33" selection-end-line="65" selection-end-column="33" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/node_modules/react-apollo/Mutation.d.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="1178">
+          <caret line="67" column="25" selection-start-line="67" selection-start-column="25" selection-end-line="67" selection-end-column="25" />
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/src/app/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="555">
-          <caret line="297" column="43" selection-start-line="297" selection-start-column="43" selection-end-line="297" selection-end-column="43" />
+        <state relative-caret-position="654">
+          <caret line="430" column="27" lean-forward="true" selection-start-line="430" selection-start-column="27" selection-end-line="430" selection-end-column="27" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
-            <element signature="e#501#3915#0" />
             <element signature="e#648#757#0" />
             <element signature="e#775#895#0" />
             <element signature="e#913#1044#0" />

src/app/index.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import Config from '../config';
 import Schema from '../schema';
-import {Layout, Menu, Input, Button} from 'antd';
+import {Layout, Menu, Input, Button, Alert} from 'antd';
 
 import '../graphiql/index.css';
 import logo from './logo.png';
@@ -9,7 +9,7 @@ import logo from './logo.png';
 import GraphiQL from 'graphiql';
 import fetch from 'isomorphic-fetch';
 import gql from "graphql-tag";
-import {Query} from "react-apollo";
+import {Query, Mutation} from "react-apollo";
 
 const {Header, Content} = Layout;
 
@@ -195,13 +195,58 @@ class App extends Component {
 
   }
 
+  idGenSchema = () => {
+    return 'schema of ' + this.state.nickname + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
+  };
+
   addSchema = (name) => {
+    let newSchema = {
+      name,
+      tables: []
+    };
+
     this.setState({
-      schemas: [...this.state.schemas, {
-        name,
-        tables: []
-      }]
-    })
+      schemas: [...this.state.schemas, newSchema]
+    });
+
+
+    let varobj = {
+      id: this.idGenSchema(),
+      user_id: this.state.userID,
+      schemaName: name,
+      createdAt: Date().now,
+      updatedAt: '',
+      schemaData: newSchema,
+      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
+        }
+      }
+    `;
+
+    console.log(111111111111111);
+
+    return (
+      <Mutation  mutation={ADD_SCHEMA}>
+        {(create_schema, { data }) => {
+          create_schema({variables: varobj});
+          console.log(222222222222222);
+        }}
+      </Mutation>
+    )
   };
 
   addTable = (columns, tableName, schemaName) => {
@@ -285,36 +330,39 @@ class App extends Component {
         {
           ({loading, error, data}) => {
             if (loading) {
-              console.log('loading');
               return 'loading';
             }
             if (error) {
-              console.log('error');
               return 'error';
             }
 
-            // 不可使用 this.setState, 会报错。
-            // Warning: Cannot update during an existing state transition (such as within `render`).
-            // Render methods should be a pure function of props and state.
-            this.state.user = {
-              avatar: data.user_by_id.avatar,
-              nickname: data.user_by_id.nickname
-            };
-            console.log(data);
-            if(data.user_by_id === null)
+            if (data.user_by_id === null)
               return (
                 <div>
                   <span style={{marginRight: '10px'}}>no such person</span>
-                  <Button onClick={()=> {this.setState({hasLogin: false})}}>relogin</Button>
+                  <Button onClick={() => {
+                    this.setState({hasLogin: false})
+                  }}>relogin</Button>
                 </div>
               );
-            else
+            else {
+              // 不可使用 this.setState, 会报错。
+              // Warning: Cannot update during an existing state transition (such as within `render`).
+              // Render methods should be a pure function of props and state.
+              this.state.user = {
+                avatar: data.user_by_id.avatar,
+                nickname: data.user_by_id.nickname
+              };
+              console.log(data);
               return (
                 <div>
                   <span style={{marginRight: '10px'}}>welcome, {data.user_by_id.nickname}</span>
-                  <Button onClick={()=> {this.setState({hasLogin: false})}}>exit</Button>
+                  <Button onClick={() => {
+                    this.setState({hasLogin: false})
+                  }}>exit</Button>
                 </div>
               );
+            }
           }
         }
       </Query>
@@ -379,14 +427,23 @@ class App extends Component {
                     return <Config addConfig={this.addConfig} deleteConfig={this.deleteConfig}
                                    schemas={this.state.schemas} configs={this.state.configs}/>;
                   default:
-                    return <GraphiQL fetcher={this.graphQLFetcher}/>
+                    return (
+                      <div>
+                        <Alert style={{marginTop: 10}} message="下面的 graphql api 对应的是是 online 的数据库，请勿随便操作"
+                               type="warning"/>
+                        <Input style={{marginTop: 10}} addonBefore="POST" defaultValue={this.state.api}
+                               onChange={(e) => {
+                                 this.setState({api: e.target.value})
+                               }}/>
+                        <GraphiQL fetcher={this.graphQLFetcher}/>
+                      </div>
+                    )
                 }
               })()
             }
           </div>
         </Content>
       </Layout>
-
     );
   }
 }