Условия If / Else для вызова мутаций GraphQL - PullRequest
Новая
       1

Условия If / Else для вызова мутаций GraphQL

0 голосов
/ 16 марта 2020

My updateUser принимает входящие сообщения электронной почты и обновляет firstName/lastName этого пользователя на сервере. В настоящее время мои мутации выполняются таким образом, что если я только введу firstName и оставлю текстовое поле lastName пустым, то в backend lastName изменится на '' пустым.

Я хочу метод, который, если я отправляю форма только с firstName, только firstName должно быть обновлено, а 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>
  );

Мутация: 

export const UpdateUserMutation = gql`
mutation UpdateUserMutation($email: String!, $firstName: String, $lastName: String){
  updateUser(email: $email, input: {firstName: $firstName, lastName: $lastName}){id,firstName}
}
`;

На детской площадке, мутация работает, даже если пропущено только одно из полей. В этом случае изменяется только это поле, а остальные поля остаются неизменными. Теперь я не знаю, как реализовать это на внешнем интерфейсе в соответствии с моим существующим кодом.

1 Ответ

0 голосов
/ 16 марта 2020

  • Вы утверждаете, что мутация, вызванная игровой площадкой, работает ... сравните запросы [подробно] в инструментах разработчика браузера (вкладка "сеть").

  • Смешение старых Компоненты стиля (<Mutation />, <Formik />) с крючками [по крайней мере] не очень хорошая идея. Используйте useFormik и useMutation перехватчики.

  • Formik управляет значениями для полей, тогда нет необходимости управлять ими в состоянии.

...