u-fit/frontend/components/login.js

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

const LOGIN_MUTATION = gql`
    mutation LOGIN_MUTATION($email: String!, $password: String!) {
        login(email: $email, password: $password) { 
            id
            email
            name 
        }
    }
`

class Login extends React.Component {
    state = {
        email: "",
        password: ""
    }

    saveToState = (ev) => {
        this.setState({ [ev.target.name]: ev.target.value })
    }

    render() {
        return <Mutation mutation={LOGIN_MUTATION} variables={this.state} refetchQueries={[{ query: CURRENT_USER_QUERY }]}>
            {(signin, { error, loading }) => {
                return <form method="post" onSubmit={async ev => {
                    ev.preventDefault()
                    const res = await signin()
                    this.setState({ name: '', email: '', password: '' })
                }}>
                    <fieldset disabled={loading} aria-busy={loading}>
                        <h2>Sign in.</h2>
                        <Error error={error} />
                        <label htmlFor="email">email
                            <input type="email" name="email" placeholder="email" value={this.state.email} onChange={this.saveToState} />
                        </label>
                        <label htmlFor="password">password
                            <input type="password" name="password" placeholder="password" value={this.state.password} onChange={this.saveToState} />
                        </label>
                        <button type="submit">Sign In!</button>
                    </fieldset>
                </form>
            }}
        </Mutation>
    }
}

export default Login