[英]If/Else Conditions for Calling GraphQL Mutations
My updateUser
takes an email input and updates that user's firstName/lastName
at the backend.我的updateUser
接收电子邮件输入并在后端更新该用户的firstName/lastName
。 Currently, my mutations run in a way that if I only enter firstName and leave the lastName textfield empty, at the backend, the lastName changes to ''blank.目前,我的突变运行方式是,如果我只输入 firstName 并将 lastName 文本字段留空,则在后端,lastName 更改为“空白”。
I want a method that the if I am submitting the form with only the firstName, only the firstName should be updated while the lastName stays the same.我想要一种方法,如果我只提交带有 firstName 的表单,则只应更新 firstName 而 lastName 保持不变。 I can't figure out where exactly to put these conditions and how.我无法弄清楚究竟在哪里放置这些条件以及如何放置。
UpdateUserPage:更新用户页面:
export default function UpdateUserPage() {
const [state, setState] = useState({
firstName: '',
lastName: '',
email: '',
phoneNumber:'',
});
const [isSubmitted, setIsSubmitted] = useState(false);
const [isAdded, setIsAdded] = useState(false);
const [errorMessage, setErrorMessage] = useState('');
function StatusMessage() {}
function submitForm(UpdateUserMutation: any) {
setIsSubmitted(true);
const { firstName, lastName, email, phoneNumber } = state;
if (email && (firstName || lastName || phoneNumber)) {
UpdateUserMutation({
variables: {
firstName: firstName,
lastName: lastName,
email: email,
phoneNumber: phoneNumber,
},
}).then(({data}:any) => {
setIsAdded(true);
})
.catch((error: { message: string; }) => {
setIsAdded(false);
setErrorMessage(error.message)
})
}
}
return (
<Mutation mutation={UpdateUserMutation}>
{(UpdateUserMutation: any) => (
<div>
<Formik
initialValues={{ firstName: '', lastName: '', email: ''}
onSubmit={(values, actions) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
actions.setSubmitting(false);
}, 1000);
}}
validationSchema={schema}
>
{props => {
const {
values: { firstName, lastName, email, phoneNumber },
errors,
touched,
handleChange,
isValid,
setFieldTouched
} = props;
const change = (name: string, e: any) => {
e.persist();
handleChange(e);
setFieldTouched(name, true, false);
setState( prevState => ({ ...prevState, [name]: e.target.value }));
};
return (
<div className='main-content'>
<form style={{ width: '100%' }}
onSubmit={e => {e.preventDefault();
submitForm(UpdateUserMutation);StatusMessage()}}>
<div>
<TextField
variant="outlined"
margin="normal"
id="email"
name="email"
helperText={touched.email ? errors.email : ""}
error={touched.email && Boolean(errors.email)}
label="Email"
value={email}
onChange={change.bind(null, "email")}
/>
<br></br>
<TextField
variant="outlined"
margin="normal"
id="firstName"
name="firstName"
helperText={touched.firstName ? errors.firstName : ""}
error={touched.firstName && Boolean(errors.firstName)}
label="First Name"
value={firstName}
onChange={change.bind(null, "firstName")}
/>
<br></br>
<TextField
variant="outlined"
margin="normal"
id="lastName"
name="lastName"
helperText={touched.lastName ? errors.lastName : ""}
error={touched.lastName && Boolean(errors.lastName)}
label="Last Name"
value={lastName}
onChange={change.bind(null, "lastName")}
/>
<Button
type="submit"
disabled={!isValid || !email}
>
Update User Info</Button>
</div>
</form>
<br></br>
{isSubmitted && StatusMessage()}
</div>
)
}}
</Formik>
</div>
)
}
</Mutation>
);
The mutation:突变:
export const UpdateUserMutation = gql`
mutation UpdateUserMutation($email: String!, $firstName: String, $lastName: String){
updateUser(email: $email, input: {firstName: $firstName, lastName: $lastName}){id,firstName}
}
`;
On the playground, the mutation works even when only one of the fields is passed.在操场上,即使只传递了一个字段,突变也会起作用。 In that case, only that field is altered and the other fields remain same.在这种情况下,只有该字段被更改,其他字段保持不变。 Now I don't know how to implement it on the front-end according to my existing code.现在不知道怎么按照我现有的代码在前端实现。
You're claiming that playground invoked mutation works ... compare requests [details] in browser dev tools (network tab).您声称游乐场调用的突变有效……在浏览器开发工具(网络选项卡)中比较请求 [详细信息]。
Mixing 'old style' compoinents ( <Mutation />
, <Formik />
) with hooks is [at least] not a good idea.将“旧式”组件( <Mutation />
, <Formik />
)与钩子混合 [至少] 不是一个好主意。 Use useFormik
and useMutation
hooks.使用useFormik
和useMutation
钩子。
Formik manages values for fields then no need to manage them in state. Formik 管理字段的值,然后无需在状态中管理它们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.