Mutation component POC

Mutation.js

class Mutation extends Component {
  constructor (props, context) {
    super(props, context)
    if (!context.client) throw new Error('<ApolloProvider /> required for mutation')
    this.client = context.client
  }

  static contextTypes = {
    client: PropTypes.object.isRequired
  }

  static propTypes = {
    children: PropTypes.func.isRequired,
    mutation: PropTypes.object.isRequired
  }

  state = {
    loading: false,
    result: undefined,
    error: null
  }

  mutate = async (options = {}) => {
    if (this.state.loading) return // support a single concurrent mutation

    const optionWhitelist = ['mutation', 'variables', 'errorPolicy']

    const params = optionWhitelist.reduce((prev, optionName) => {
      return Object.assign({}, prev, {
        [optionName]: options[optionName] || this.props[optionName]
      })
    }, {})

    this.setState({
      loading: true,
      error: null,
      result: undefined
    })

    try {
      let result = await this.client.mutate(params)
      this.setState({
        loading: false,
        result
      })
    } catch (error) {
      this.setState({
        loading: false,
        error
      })
    }
  }

  render () {
    return this.props.children({
      mutate: this.mutate,
      loading: this.state.loading,
      result: this.state.result,
      error: this.state.error
    })
  }
}