ApolloFormik component, for building typed Formik forms that mutate GraphQL via Apollo

ApolloFormik.tsx

import * as React from 'react';
import { Mutation, ApolloConsumer } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { Formik, FormikProps, Form } from 'formik';
import { DocumentNode } from 'graphql';

interface ApolloFormProps<T> {
  afterSubmit?: (values: T) => void;
  children: (formikBag: FormikProps<T>) => React.ReactNode;
  initialValues: T;
  mutation: DocumentNode;
}

class ApolloFormik<T> extends React.PureComponent<ApolloFormProps<T>> {
  mutate = async (client: ApolloClient<any>, variables: T) => {
    await client.mutate<void, T>({ mutation: this.props.mutation, variables });

    if (!!this.props.afterSubmit) {
      this.props.afterSubmit(variables);
    }
  };

  render() {
    const { children, initialValues } = this.props;

    return (
      <ApolloConsumer>
        {client => (
          <Formik
            initialValues={initialValues}
            onSubmit={values => {
              this.mutate(client, values);
            }}
            render={(formikBag: FormikProps<T>) => (
              <Form>
                {children(formikBag)}
              </Form>
            )}
          />
        )}
      </ApolloConsumer>
    );
  }
}

export default ApolloFormik;

Usage:

import { Field } from 'formik';
import gql from 'graphql-tag';

const MY_FORM_MUTATION = gql`
    mutation mutateThing($email: string!) {
        mutateThing(email: $email) {
            email
        }
    }
`

class MyFormTyped extends ApolloFormik<{email: string}> {}

const MyForm = () => {
  return (
    <MyFormTyped
      initialValues={{ email: '' }}
      mutation={MY_FORM_MUTATION}
    >
      {formikBag => <>
        <Field type="email" name="email" placeholder="Email" />
        <button type="submit">Submit</button>
      </>}
    </MyFormTyped>
  )
}