[メモ] reduxのformikを使ったformでmutationを使う

参考

https://github.com/jaredpalmer/formik/issues/70
https://gist.github.com/mwickett/2aecfdeea40daa07d39e11922ae1fe20

react-apolloのgraphqlメソッドのリファレンス
https://www.apollographql.com/docs/react/api/react-apollo.html#graphql
react-apolloのgraphqlメソッドにmutation使った場合のconfigのリファレンス
https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-mutation-options

const handleSubmit = (payload, { props }) => {
  const {
    uiActions: { sendNotification, closeAccountUpdateDialog },
    currentAccountId,
    updateCurrentAccount
  } = props;

  const { lastName: last_name, firstName: first_name } = payload;

  updateCurrentAccount({
    variables: { id: currentAccountId, last_name, first_name }
  })
    .then(() => {
      sendNotification({
        level: 'success',
        message: 'アカウント情報を更新しました。'
      });

      closeAccountUpdateDialog();
    })
    .catch(e => {
      sendNotification({
        level: 'error',
        message: 'アカウント情報更新に失敗しました。'
      });

      closeAccountUpdateDialog();
    });
};

class AccountUpdateDialog extends Component<Props> {
  props: Props;

  render() {
    const { values, handleChange, handleSubmit, uiActions, ui } = this.props;

    return (
      <form id="account-update-form" onSubmit={handleSubmit}>
        <Dialog
          open={this.props.open}
          onClose={uiActions.closeAccountUpdateDialog}
        >
          <DialogTitle>アカウント情報更新</DialogTitle>
          <DialogContent>
            <DialogContentText>基本情報</DialogContentText>
            <TextField
              margin="dense"
              id="lastName"
              label="姓"
              type="text"
              fullWidth
              value={values.lastName}
              onChange={handleChange}
            />
            <TextField
              margin="dense"
              id="firstName"
              label="名"
              type="text"
              fullWidth
              value={values.firstName}
              onChange={handleChange}
            />
          </DialogContent>
          <DialogActions>
            <Button
              onClick={uiActions.closeAccountUpdateDialog}
              color="primary"
            >
              閉じる
            </Button>
            <Button type="submit" form="account-update-form" color="primary">
              更新
            </Button>
          </DialogActions>
        </Dialog>
      </form>
    );
  }
}

const AccountUpdateDialogForm = compose(
  graphql(UPDATE_CURRENT_ACCOUNT, { name: 'updateCurrentAccount' }), // nameを指定しないとprops.mutate()になる。
  withFormik({
    validationSchema: yup.object().shape({
      lastName: yup.string(),
      firstName: yup.string()
    }),
    handleSubmit
  })
)(AccountUpdateDialog);