mutatable react HOC

mutatable.jsx

import hoistNonReactStatic from 'hoist-non-react-statics';
import React from 'react';

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}

// See: https://facebook.github.io/react/docs/higher-order-components.html
export default function mutatable({ mutationName = 'mutate' } = {}) {
  return (SourceComponent) => {
    class Mutatable extends React.Component {

      state = {
        loading: false,
        error: '',
      };

      submit = (event, variables, { handleError, handleSuccess } = {}) => {
        event.preventDefault();

        this.setState({ loading: true, error: '' });

        this.props[mutationName]({ variables })
          .then(() => {
            console.log(`[${Mutatable.displayName}] Successful!`);
            this.setState({ loading: false });
            if (handleSuccess) {
              handleSuccess();
            }
          })
          .catch((error) => {
            console.error(`[${Mutatable.displayName}] Failed!`, error);
            this.setState({ loading: false, error: error.message });
            if (handleError) {
              handleError();
            }
          });
      }

      render() {
        return (
          <SourceComponent
            {...this.props}
            loading={this.state.loading}
            error={this.state.error}
            submit={this.submit}
          />
        );
      }
    }

    Mutatable.displayName = `Mutatable(${getDisplayName(SourceComponent)})`;
    hoistNonReactStatic(Mutatable, SourceComponent);
    return Mutatable;
  };
}

usage.jsx

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

class Register extends React.Component {
  static contextTypes = {
    router: React.PropTypes.object,
  }

  handleSuccess = () => {
    this.context.router.transitionTo('/home');
  }

  render() {
    const { t, submit, loading, error } = this.props;
    const { email, password } = this.state;

    return (
      <div>
        {loading && (<div>Loading…</div>)}
        <form
          onSubmit={event => submit(
            event,
            { email, password },
            { handleSuccess: this.handleSuccess },
          )}
        >
          {error && (<div>{error}</div>)}
          <input
            name="email"
            value={email}
            onChange={event => this.setState({ email: event.target.value })}
          /><br />
          <input
            type="password"
            name="password"
            value={password}
            onChange={event => this.setState({ password: event.target.value })}
          /><br />
          <button type="submit" />
        </form>
      </div>
    );
  }
}

const RegisterUserMutation = gql`
  mutation RegisterUser($email: String!, $password: String!) {
    registerUser(email: $email, password: $password)
  }
`;

export default compose(
  graphql(RegisterUserMutation),
  mutatable(), // Provides the props 'error' and 'loading' which can be used in the Register component,
               // as well as the method 'submit' which needs to be called to trigger the mutation.
)(Register);

nice!