GraphQL
redux
Formik

[メモ] 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);