onSuccess callback & GraphQL

Is it possible to call a function on the component where the form is imported and displayed when I submit the form and validation passed?

I have some higher order components on my components (for example I’m using react-apollo for handling GraphQL requests) that bind certain methods to this.props that I don’t have access to in the onSuccess method of the form, because that is not a real react component.

I’d rather have the onSuccess method live in the Component where it get’s used

LoginForm.js

import validatorjs from 'validatorjs';
import MobxReactForm from 'mobx-react-form';

const plugins = { dvr: validatorjs };

const fields = [{
  name: 'email',
  label: 'Email',
  rules: 'required|email',
}, {
  name: 'password',
  label: 'Password',
  type: 'password',
  rules: 'required',
}];

class LoginForm extends MobxReactForm {
  onSuccess = (form) => {
    // i have no access to my login mutation here 
    console.log('Form Values!', form.values());
  }

  onError = (form) => {
    // get all form errors
    console.log('All form errors', form.errors());
    // invalidate the form with a custom error message
    form.invalidate('This is a generic error message!');
  }
}

export default new LoginForm({ fields }, { plugins });

Login.js

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import { inject, observer } from 'mobx-react';
import { gql, graphql } from 'react-apollo';
import cx from 'classnames';
import s from './Login.css';
import form from './LoginForm';
[... more imports]

class Login extends React.Component {
  static propTypes = {
    login: React.PropTypes.func.isRequired,
  }

  // I'd like to call this method on submit
  tryLogin = (form) => {
    this.props.login({
      email: ....,
      password: ....,
    })
    .then(() => {
      ... success
    })
    .catch(() => {
      ... error
    });
  }

  render() {
    return (
      <Page>
        <PageHeader />
        <PageInner>
          <GridColumn color={2} third>
            <div className={s.content}>
              <h1 className={cx('h2 p-b-2', s.headlineSpace)}>
                login
              </h1>
              <form onSubmit={form.onSubmit}>
                {form.error ? <Alert>{form.error}</Alert> : null}

                <Input field={form.$('email')} />
                <Input field={form.$('password')} />

                <div className={s.submit}>
                  <Button type="submit" onClick={form.onSubmit}>Login</Button>
                </div>
              </form>
            </div>
          </GridColumn>
        </PageInner>
      </Page>
    );
  }
}

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

export default inject('store')(graphql(login, { name: 'login' })(withStyles(s)(observer(Login))));

[mxmtsk]

thank you @foxhound87, Overriding validation handlers is exactly what I was looking for. I missed that in the documentation 😃

[foxhound87]

@kitze now the built-in event handlers are able to also handle promises, if you use them you can track the new submitting observable prop.