Formik: Example with react-apollo

[mwickett]

Hey there,

Wondering if anyone has used Formik along with react-apollo. I'm looking for an example of how to call a graphql mutation from formik's handleSubmit. I've looked at recompose as a potential option.

I'm relatively new to React, so appreciate any pointers in the right direction.

[jaredpalmer]

There isn't anything special about apollo (or redux/mobx). You end up using Formik the same way. You pass in your mutation/dispatch+action creator as a prop to the Formik-enhanced form and then call whatever you need to within Formik's handleSubmit.

import { Formik } from 'formik'
import { graphql, compose } from 'react-apollo' // or whatevs

const handleSubmit = (payload, { props, setSubmitting, setErrors }) => {
   props.mutate(payload)  // or whatever you've named your mutation
    .then(
       () => {
          setSubmitting(false) 
       }, 
       error => {
           setSubmitting(false)
           setErrors(transformMyApiErrors(error))
       }
     )

/*
 Note, in Redux land, depending on how you do or do not use `mapDispatchToProps`,
 you may need to call`props.store.dispatch(myActionCreator(payload))` or
 just `props.myActionCreator(payload)`.
*/
};

const MyForm = (props) => (
  <form onSubmit={props.handleSubmit}>
    ...
  </form>
)

export default compose(
   graphql(...), // your mutation or whatevs
   Formik({
      ...
      handleSubmit,
      displayName: 'MyForm',
   })
)(MyForm)

Now you can / might want to wrap the parent element is of your Formik form with your connect or graphql HOC and then pass down mutation / actionCreator instead (i.e. <MyEnhancedForm updateUpdate={this.props.updateUserMutation} />).

I have no clue how GraphQL subscriptions work, but AFAIK, the technique would be similar. This is because the Formik HOC is stateful and it internally maps all non function / Promise props to its internal state. Thus, Formik is agnostic about how you get data into it---one of its best features IMHO.

[jaredpalmer]

@mwickett In answering this, I think its worthwhile to add a guide for redux and probably apollo to the docs.

[jaredpalmer]

@mwickett let me know if compose works as I expect, i haven't tried it myself.

Another todo: check that Formik's TS types are compatible with apollo/recompose's compose.

[mwickett]

It does work!

Still feeling like this approach is a bit clunky, but your example really helped us (@zchsh and I) clean it up.

Here's what we've got: https://gist.github.com/mwickett/2aecfdeea40daa07d39e11922ae1fe20

[dimaninc]

don't forget to use withFormik instead of Formik in compose()

[rzane]

I made a little library that people might find helpful: https://github.com/promptworks/formik-apollo