[Next] Should form automatically reset if passed-in props change?

The scenario I’m trying to implement is the following:

1. User clicks “edit”
2. GraphQL query gets dispatched, form gets rendered with loading indicator
3. GraphQL response gets returned, apollo updates underlying bound components
4. Form gets filled with response data, loading indicator gets removed

The problem I’m running into is that mapPropsToValues() only gets called in the constructor and not in componentWillReceiveProps(), and as a result Formik never updates the form with the received values and just renders the empty state. Is there any way around this right now, or is this not supported?

With a slightly hacky workaround I’m currently passing down the values as a different prop so they reach the form component itself, where I’m doing a this.props.resetForm() whenever the prop changes. Does the job for now, but wondering if we could just use componentWillReceiveProps() in Formik itself. I realize it can be a bit tricky but by checking if the previous values prop were falsy and/or the values state is not dirty this should be rather safe I think.

[pleunv]

If you use the <Formik> component you should be able to pass enableReinitialize, which will reinitialize when it detects your initialValues have changed. So what should work is something like this:

const emptyFormState = {
  id: undefined,
  firstName: '',
  lastName: ''
};

export default class MyForm extends React.Component {
  getInitialValues() {
    return this.props.data.user || emptyFormState;
  }

  render() {
    return (
      <Formik
        enableReinitialize
        initialValues={this.getInitialValues()}
        onSubmit={this.props.onSubmit}
      >
        <YourFormLogic />
      </Formik>
    )
  }
}

MyForm.propTypes = {
  data: PropTypes.shape({
    user: PropTypes.shape({
      id: PropTypes.number.isRequired,
      firstName: PropTypes.string.isRequired,
      lastName: PropTypes.string.isRequired
    })
  }).isRequired,
  onSubmit: PropTypes.func.isRequired
};

Your user query data starts off undefined -> apollo fires the request -> apollo receives the response -> user prop gets updated -> MyForm re-renders -> Formik detects change in initialValues -> Formik reinitializes the form.

That said, you could also very easily block rendering of <Formik ... /> and just return null or a <Loader /> as long is this.props.data.user === undefined. Depends what behavior you want.

[pleunv]

Looking at your gist that’s normal, since your values will be undefined until apollo gets a response back from your query. 2 options:

• You initialize your values with some kind of default value (i.e. empty string - see my emptyFormState example) since input components will throw that uncontrolled-to-controlled warning when you initialize them with undefined.
• You block rendering until this.props.data.user !== undefined or this.props.loading === false.