apollo+react实战项目 stepbystep（三 ）

增加链接

1、添加一个createLink组件，包括两个输入框和一个提交框

import React from 'react';
import {Mutation} from 'react-apollo';
import gql from 'graphql-tag';


export default class CreateLink extends React.Component{
  constructor(props){
    super(props);
    this.state={
      description:'',
      url:'',
    }
  }


  render(){
    const POST_MUTATION=gql`
      mutation PostMutation($description:String!,$url:String!){
        post(description:$description,url:$url){
          id
          description
          createdAt
          url
        }
      }
    `
    const {description,url} = this.state;
    return(
      <div>
        <div className="flex flex-column mt3">
          <input
            className="mb2"
            type='text'
            value={description}
            placeholder='description'
            onChange={e=>this.setState({description:e.target.value})}
          />
          <input
            className="mb2"
            type='text'
            value={url}
            placeholder='url'
            onChange={e=>this.setState({url:e.target.value})}
          />
        </div>
        <Mutation mutation={POST_MUTATION} variables={{description,url}}>
          {
            postMutation=>(
              <button onClick={postMutation}>Submit</button>
            )
          }
        </Mutation>
      </div>

    )
  }
}

　　使用Mutation组件包裹住要提交数据的button，不用自定义处理事件，直接引用解析函数。

现在我们在input输入框提交之后，页面没有任何变化，但是在playgroud中再次查询，会发现新增加了一条记录。