AutoMate/frontend/components/UserCreate.js

import React from 'react'
import gql from 'graphql-tag'
import { Mutation } from 'react-apollo'
import { CURRENT_USER } from './User'

const USER_CREATE = gql`
  mutation USER_CREATE($email: String!, $name: String!, $abbreviation: String!, $password: String!) {
    createUser(email: $email, name: $name, abbreviation: $abbreviation, password: $password) {
      id
      name
      email
      abbreviation
    }
  }
`

class UserCreate extends React.Component {
  state = {
    name: '',
    email: '',
    abbreviation: '',
    password: ''
  }

  handleInput = event => {
    this.setState({ [event.target.name]: event.target.value })
  }

  render() {
    <Mutation
      mutation={USER_CREATE}
      variables={this.state}
      refetchQueries={[{ query: CURRENT_USER }]}
    >
      {(userCreate, { error, loading }) => (
        <form
          method="POST"
          onSubmit={async event => {
            event.preventDefault()
            await userCreate()
            this.setState({ name: '', email: '', abbreviation: '', password: '' })
          }}
        >
          <input type="text" name="name" id="name" value={this.state.name} onChange={this.handleInput} />
          <label htmlFor="name"></label>
          <input type="text" name="abbreviation" id="abbreviation" value={this.state.abbreviation} onChange={this.handleInput} />
          <label htmlFor="abbreviation"></label>
          <input type="text" name="email" id="email" value={this.state.email} onChange={this.handleInput} />
          <label htmlFor="email"></label>
          <input type="password" name="password" id="password" value={this.state.password} onChange={this.handleInput} />
          <label htmlFor="password"></label>
          <button type="submit">Create</button>
        </form>
      )}
    </Mutation>
  }
}

export default UserCreate