How to apply a mutation using Formik? - reactjs

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?

Answer 1

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>