Javascript 调用GraphQL的If/Else条件

My

updateUser

接收电子邮件输入，并在后端更新该用户的

firstName/lastName

。目前，我的突变的运行方式是，如果我只输入firstName并在后端将lastName文本字段留空，则lastName将变为“空白”

我想要一个方法，如果我提交的表单只有名字，只有名字应该更新，而姓氏保持不变。我不知道该把这些条件具体放在哪里，怎么放

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>
  );

在操场上，即使只有一块田地经过，突变也会起作用。在这种情况下，只有该字段被更改，其他字段保持不变。现在我不知道如何根据我现有的代码在前端实现它。

• 你是说你的基因工程。。。在浏览器开发工具（网络选项卡）中比较请求[详细信息]

• 将“旧式”组件（
  ，
  ）与挂钩混合[至少]不是一个好主意。使用

  useFormik

  和

  usemotation

  钩子

• Formik管理字段的值，然后无需在状态中管理它们

---

请使用relay.js，因为这就是传递空字符串的游乐场[如上]？是的，游乐场也可以使用空字符串@xadm如果我已经在使用Apollo，使用relay是否合适@我想我之前误解了你的问题。在操场上，如果我在不传递lastName的情况下运行查询，那么它只会修改firstName并保持lastName不变。然而，在我的前端，我不确定如何实现不同的案例。我希望如果我只输入firstName，应该调用一个只有firstName的突变。我说得通吗？@a125你可以有条件地构造

变量
对象。。。从
variables={email}开始和有条件（非空）定义其他属性。。。或者，如果后端按照您需要的方式对其进行解释，则将其传递为
null
。
export const UpdateUserMutation = gql`
mutation UpdateUserMutation($email: String!, $firstName: String, $lastName: String){
  updateUser(email: $email, input: {firstName: $firstName, lastName: $lastName}){id,firstName}
}
`;