3.3-end-mutations-v2.1

Author: Carlos Rufo Jimenez

src/components/CreateLink.js

@@ -1,60 +1,53 @@
 import React, { Component } from 'react'
-import { graphql } from 'react-apollo'
+import { Mutation } from 'react-apollo'
 import gql from 'graphql-tag'
 
+// 1
+const POST_MUTATION = gql`
+  # 2
+  mutation PostMutation($description: String!, $url: String!) {
+    post(description: $description, url: $url) {
+      id
+      createdAt
+      url
+      description
+    }
+  }
+`
+
 class CreateLink extends Component {
   state = {
     description: '',
     url: '',
   }
 
-  _createLink = async () => {
-    const { description, url } = this.state
-    await this.props.postMutation({
-      variables: {
-        description,
-        url
-      }
-    })
-  }
-
   render() {
+    const { description, url } = this.state
     return (
       <div>
         <div className="flex flex-column mt3">
           <input
             className="mb2"
-            value={this.state.description}
+            value={description}
             onChange={e => this.setState({ description: e.target.value })}
             type="text"
             placeholder="A description for the link"
           />
           <input
             className="mb2"
-            value={this.state.url}
+            value={url}
             onChange={e => this.setState({ url: e.target.value })}
             type="text"
             placeholder="The URL for the link"
           />
         </div>
-        <button onClick={() => this._createLink()}>Submit</button>
+        <Mutation mutation={POST_MUTATION} variables={{ description, url }}>
+          {postMutation => <button onClick={postMutation}>Submit</button>}
+        </Mutation>
       </div>
     )
   }
 }
 
-// 1
-const POST_MUTATION = gql`
-  # 2
-  mutation PostMutation($description: String!, $url: String!) {
-    post(description: $description, url: $url) {
-      id
-      createdAt
-      url
-      description
-    }
-  }
-`
-
 // 3
-export default graphql(POST_MUTATION, { name: 'postMutation' })(CreateLink)
+export default CreateLink;