Cannot initialize form data using redux-form, react-apollo, and graphql

Question

I need to initialize form data from state - but because i have 2 containers, one graphql container and one redux container, I'm not sure how to do it. I am also using <Form /> from semantic-ui-react.

When component is rendered, the console.log's from action is displayed; however, form data is not loaded with initial values. Can you help?

UserEditComponent.js

const UserEditComponent = (props) => {

  const { initialValues, loadFormData, handleSubmit, createUser } = props;

  // initialize form w/ data - Not Working!
  loadFormData(initialValues);

  const submitForm = async (data) => {
    const result = await createUser(data);
    return result;
  };

  return (
    <div id='new-user'>
      <Form className='newUserForm' onSubmit={ handleSubmit(submitForm.bind(this)) }>

        <h3 className='group-title'>Information</h3>
        {
          RenderFieldArrays(formGroup1)
        }

        <Button className='heavy' type='submit' primary>
          Continue
        </Button>
      </Form>
    </div>
  );
};

UserEditComponent.displayName = 'UserEditComponent';

UserEditComponent.propTypes = {
  handleSubmit: React.PropTypes.func,
  createUser: React.PropTypes.func.isRequired,
  initialValues: React.PropTypes.object,
  loadFormData: React.PropTypes.func
};

let InitializeFromStateForm = reduxForm({
  form: 'initializeFromState',
  enableReinitialize: true
})(UserEditComponent);

InitializeFromStateForm = connect(
  state => ({ initialValues: state.overlay.content.props }),
  dispatch => ({
    loadFormData: data => {
      console.log('------ inside loadFormData!');
      dispatch({
        type: types.LOAD,
        payload: data
      });
    }
  })
)(InitializeFromStateForm);

export default InitializeFromStateForm;`

RenderFieldArrays.js

const RenderFieldArrays = (formGroup) => {
  return formGroup.map( (val, ind) => {
    return (
      <FieldArray
        key={ ind }
        name={ ind.toString() }
        formGroup={ val }
        component={ RenderFormGroup }
      />
    );
  });
};

RenderFieldArrays.propTypes = {
  formGroup: PropTypes.array.isRequired
};

export default RenderFieldArrays;

UserEditContainer.js

const gqlArgs = {
  props: ({ mutate }) => ({
    createUser: async function test(data) {
      try {
        const user = getUser(data);
        const result = await mutate(user);
      } catch (err) {
        console.log('GQL Error: ', err);
      }
    }
  })
};

// ## GraphQL container

const gqlMemberEdit = graphql(
  UserEditMutation,
  gqlArgs
)(InitializeFromStateForm);


export const UserEditPopup = connect(
  state => { ... },
  dispatch => { ... }
)(gqlMemberEdit);

reducer_userEdit.js

export const types = Object.freeze({
  LOAD: 'LOAD'
});

// Default State
const DEF_STATE = {
  firstName: null,
  lastName: null
};

export const reducer = (state = DEF_STATE, action) => {
  let newState;
  switch (action.type) {
    case types.LOAD:
      console.log('---- inside LOAD! action.payload: ', action.payload);
      newState = {
        data: {
          firstName: 'hello',
          lastName: 'test'
        }
      };
      break;
    default:
      newState = state;
  }
  return newState;
};

export const loadFormData = data => {
  console.log('----- inside loadFormData!');
  return {
    type: types.LOAD,
    payload: data
  };
};

Do you see the `INITIALIZE` actions being dispatched? With what values? It's confusing how you are pulling `initialValues` from Redux state in two different components. Seems like you should just pick one of them to `connect()`. — Erik R., May 08 '17 at 16:56
@ErikR. Yes, I see `@@redux-form/INITIALIZE` dispatched with correct payload in `redux dev tools` - but the payload is an object that is not in same structure as what `redux-form` gives me when submitted...i think i need to correct this. Do you have other tips? Thank you! — Jenna, May 08 '17 at 20:17
@ErikR.Also, I took out `initialValues` from `UserEditContainer.js` and put in `UserEditComponent.js` instead like you suggested (i was pulling `initialValues` from both earlier) — Jenna, May 08 '17 at 20:20

score 1 · Answer 1 · answered May 11 '17 at 20:58

1

Use the initialize() action from redux-form props and pass in a initialValues object with keys that match the <Field />'s name variable.

In your componentDidMount(), you may call initialize action so initial values will populate form when loaded.

answered May 11 '17 at 20:58

Jenna

111
2
8

Cannot initialize form data using redux-form, react-apollo, and graphql

1 Answers1