React-apollo: Redux Form

[tomitrescak]

Hi

your example for redux form does not seem to work.

const withForm = reduxForm({
  form: 'contact',
  fields: ['solutions'],
}, (state: any, ownProps: IComponent) => {
  console.log('doing ...'); // This bit never get executed
});

I am using the latest react-apollo and redux-form v.6. (latest)

Any idea how can I fix this?
Thanks!

[helfer]

@tomitrescak can you be more specific? Is it just that the documentation is broken, or does the feature actually not get executed?

[tomitrescak]

Yea, it never gets executed. Looking at the redux-form implementation, I'm not sure how it did work in the first place .. maybe with previous version 5?

This is what I have with the latest version:

const withData = graphql(gql`
    query exercise($exerciseId: String, $userId: String) {
      exercise(id: $exerciseId, userId: $userId) {
        ...
      }
    }
  `, {
    options: (ownProps) => ({
      variables: {
        exerciseId: ownProps.params.exerciseId,
        userId: ownProps.userId
      }
    }),
    props: ({ownProps, data}) => ({
      initialValues: {
        exercise: data.exercise
      }
    })
  });

and form is created simply as

const ExerciseForm = withData(reduxForm({
  form: 'exerciseEditForm',
  enableReinitialize: true     // THIS IS VERY IMPORTANT, OTHERWISE FORM WILL BE EMPTY
})(ExerciseView));

[jbaxleyiii]

@tomitrescak it is using version 5.*. I'll work on updating the example to use the new api.

https://github.com/apollostack/react-apollo/blob/master/package.json#L85

[tmeasday]

It might be worth pointing out that using enableReinitialize: true seems a little risky if you think the underlying data may change from another source, leading to users clobbering each other and a bad UX. Another solution to the same problem would be to inject some loading state:

@reduxForm({ form: 'exerciseForm' })
class ExerciseForm extends Component { ... }

@graphql(query)
function FormOrLoading({ data: { loading, exercise } }) {
  if (!exercise && loading) {
    return <LoadingSpinner />;
  } else {
     return <ExerciseForm initialValues={{ exercise }} />;
  }
}

[tomitrescak]

@tmeasday I already ran into issues with enableReinitialise, so it's highly disregarded and your solution it probably the best one.