How to apply a mutation using Formik?

Question

I have been trying to come up with a way implement the submit function of the react-apollo <Mutation> component. Found some examples out there that seem to be an overkill for this simple task, including this and this. Since I am fresh programmer just starting to learn React, let alone Formik or even HOCs (I guess that's the way to go?), I can't really wrap my head around these examples and how to adapt them to my analogue Hello world code.

Here's my sign up form:

import React, { Component } from "react";
import { withFormik, Form, Field } from "formik";
import { Mutation } from "react-apollo";
import { gql } from "apollo-boost";

const CREATE_USER_MUTATION = gql`
  mutation CREATE_USER_MUTATION(
    $name: String!
    $email: String!
    $password: String!
  ) {
    signup(name: $name, email: $email, password: $password) {
      id
      name
      email
      password
      permissions
    }
  }
`;

class App extends Component {
  state = {
    name: "",
    email: "",
    password: ""
  };
  render() {
    return (
      <Mutation mutation={CREATE_USER_MUTATION}>
        {(signup,{loading}) => (
          <Form>
            <Field type="text" name="name" placeholder="Name" />
            <Field type="email" name="email" placeholder="Email" />
            <Field type="password" name="password" placeholder="Password" />
            <button type="submit" disabled={loading}>
              Sign Up
            </button>
          </Form>
        )}
      </Mutation>
    );
  }
}

const SignupPage = withFormik({
  mapPropsToValues() {
    return {
      name: "",
      email: "",
      password: ""
    };
  },
  handleSubmit() { ... }
})(App);

export default SignupPage;

How can I access signup in handleSubmit?

Alexander · Accepted Answer · 2019-03-15T20:51:41.010

Using <Formik /> would be a better way to go instead of using the withFormik() HOC.

Since <Formik /> is inside <Mutation/> (instead of the other way around) you are able to call your mutation in the onSubmit field.

https://jaredpalmer.com/formik/docs/api/formik

<Mutation mutation={CREATE_USER_MUTATION}>
    {(signup,{loading}) => (

        <Formik
            initialValues={{ name: '', email: '', password: '' }}
            onSubmit={ async (values, actions) => {
                // You can access the signup mutation in here now
                // You can access values.name, values.email, values.password
                // You can access actions, e.g. actions.setSubmitting(false) once you've finished the mutation
            }}


            render={props => (

                <Form onSubmit={props.handleSubmit}>
                    <Field 
                        type="text"
                        onChange={props.handleChange}
                        onBlur={props.handleBlur}
                        value={props.values.name} 
                        name="name" 
                        placeholder="Name" 
                    />
                    <Field 
                        type="email"
                        onChange={props.handleChange}
                        onBlur={props.handleBlur}
                        value={props.values.email} 
                        name="email" 
                        placeholder="Email" 
                    />
                    <Field 
                        type="password"
                        onChange={props.handleChange}
                        onBlur={props.handleBlur}
                        value={props.values.email} 
                        name="password" 
                        placeholder="Password" 
                    />
                    <button type="submit" disabled={loading}> Sign Up </button>
                </Form>
            )}
        />
    )}
</Mutation>

That pretty much solves it. Got so much into HOCs that I overlooked the simple way to go. Note: `onClick` event is missing the `props.`. In any case, this event is redundant since it is being called in the Form component. — Tiago, Mar 13 '19 at 17:53
Great! Yeah, I think if you want to use the withFormik HOC you have to use the mutation HOC as well, and then use compose. — Alexander, Mar 13 '19 at 18:09

How to apply a mutation using Formik?

1 Answers1