Форма

[eshevlyakova]

Задача

Починить форму отправки данных (проблема с капчей)

[Amiditin]

@TorinAsakura Не подскажешь где можно взять ссылку на playground graphql или как получить к нему доступ?

[TorinAsakura]

@TorinAsakura Не подскажешь где можно взять ссылку на playground graphql или как получить к нему доступ?

wp.misik.pro/graphql - ендпойнт

если тебе обязательно нужен плейграунд - давай почту - заведу тебе акк

[Amiditin]

если тебе обязательно нужен плейграунд - давай почту - заведу тебе акк

Да нужен, почта: [email protected]

[TorinAsakura]

если тебе обязательно нужен плейграунд - давай почту - заведу тебе акк

Да нужен, почта: [email protected]

Z8xB&aBsw@qLhHY1HWpp*D3o - пароль, поставишь 2FA как авторизуешься, это обязательно

[Amiditin]

Описание бага

После отправки формы данные не проходят валидацию на сервере "Field validation error".

Пример запроса

// request: 
{
  "operationName": "SubmitForm",
  "variables": {
    "name": "Дмитрий",
    "phone": "+79290497921",
    "email": "[email protected]",
    "comment": "Тестовый запрос"
  },
  "query": "mutation SubmitForm($name: String!, $email: String!, $phone: String!, $comment: String!) {
    submitForm(
      input: {
        formId: 2
        data: [
          { id: 5, value: $name }
          { id: 6, value: $phone }
          { id: 7, value: $email }
          { id: 8, value: $comment }
        ]
      }
    ) {
      errors {
        fieldId
        message
        slug
      }
      message
      success
    }
  }"
}

// response: 
{
  "submitForm": {
    "errors": [
      {
        "fieldId": 19,
        "message": "?",
        "slug": "?",
        "__typename": "FieldError"
      }
    ],
    "message": "Field validation error",
    "success": false,
    "__typename": "SubmitFormPayload"
  }
}

Воспроизведение

1. Заполняем форму
2. Отправляем
3. Получаем уведомление "Не отправлено"
4. В Response запроса получена ошибка валидации.

Ожидаемое поведение

После отправки данные заносятся в Заявки Ninja Forms и в response присутствует поле "success": true

Вопросы

1. Почему в запросе data name id=5, phone id=6 ..., где найти полный список полей, api для работы с формой?
2. Стоит ли оптимизировать/улучшить код в form-content.component.tsx?
   пример из if (!name) setNameError(true) else setNameError(false) в setNameError(name === '').
3. Как понять, что означает ошибка в респонсе?

    "errors": [
      {
        "fieldId": 19,
        "message": "?",
        "slug": "?",
        "__typename": "FieldError"
      }
    ],

Окружение

• on progress

---

FYI @eshevlyakova

[TorinAsakura]

1. Не совсем, что и где ты хочешь найти. Об каких id=5 и id=6 идёт речь? По поводу апи - оно в админке прям на самом видном месте - https://wp.misik.pro/wp-admin/admin.php?page=graphiql-ide
2. Однозначно, при условии сохранения обратной совместимости
3. Чтож, очевидно это ошибка типизации и нужно найти что это за филдайди и понять что ты делаешь с ним

@eshevlyakova полагаю ты бы могла подсыпать контекста, так как это твоих рук дело

[Amiditin]

2 Хорошо
1 и 3. Мне как раз и хочется узнать откуда взялись эти id при запросе в submit.mutation.ts, в graphql я этого не нашел

data: [
      { id: 5, value: $name }
      { id: 6, value: $phone }
      { id: 7, value: $email }
      { id: 8, value: $comment }
]

[TorinAsakura]

2 Хорошо 1 и 3. Мне как раз и хочется узнать откуда взялись эти id при запросе в submit.mutation.ts, в graphql я этого не нашел

data: [
      { id: 5, value: $name }
      { id: 6, value: $phone }
      { id: 7, value: $email }
      { id: 8, value: $comment }
]

@eshevlyakova хороший вопрос
@Amiditin а попробуй в айди подкинуть айдишники, которые реально указаны в нинджа

[eshevlyakova]

@Amiditin

Мне как раз и хочется узнать откуда взялись эти id

Это id полей из базы данных, получить их можешь в плейграунде:

query Fileds($id: ID!) {
  form(id: $id) {
    fields {
      edges {
        node {
          databaseId
          label
        }
      }
    }
  }
}

[Amiditin]

Прогресс

Создал ветку и отрефакторил в ней код @ui/form:
https://github.com/torin-asakura/misik/tree/fix/feedback-form

Про баг

Если не добавлять ReCaptcha блок в форму Ninja Forms, то отправка данных успешно работает. Тогда возникает вопрос как использовать token, полученный из executeRecaptcha (react-google-recaptcha-v3), чтобы ReCaptcha работала.

Если оставить блок ReCaptcha, то появляется поле recaptcha, в которое, по идее, нужно отправлять token, но в response опять вылезает ошибка без подробностей:

"data": {
  "submitForm": {
    "errors": [
      {
        "fieldId": 20,
        "message": null,
        "slug": null
      }
    ],
    "message": "Field validation error",
    "success": false
  }
},

Пример запроса

mutation SubmitForm($name: String!, $email: String!, $phone: String!, $comment: String!, $recaptcha: String!) {
  submitForm(
    input: {formId: 2, data: [{id: 5, value: $name}, {id: 6, value: $phone}, {id: 7, value: $email}, {id: 8, value: $comment}, {id: 20, value: $recaptcha}]}
  ) {
    errors {
      fieldId
      message
      slug
    }
    message
    success
  }
}

variables {
  "name": "Test",
  "email": "[email protected]",
  "phone": "+79590592179",
  "comment": "",
  "recaptcha": "03ADUVZwBkv8OM9IFctw9hDawaAlwVrCsmF8fhAf3QnS-i6t3RjdSnGIewIbAr8yHSus6eSqf4OgGkXeIqOq_EcZIjnVzRwCTHl53fjIj42yHz2r9zMkEZemVlHmC1j1aWhksQxaXK136etgwBolwhq1_mr2-r9LJzDHrPHhEY06klBXQTXyeqnkvocq8fgphwqMoCzCkJibrZ4blw-8XtQ8qBG3tllNlRA91prHZjdNnUndM2eyzGdydtmKwICHksmwfbtx26OO4lVeAA4eIOyI2wO5R6sXkEUXUfUj00u0Y_epr8TkJjKFneMBdqwSRI6KQPpso5izxQS3mW4ClKYraxHuh52JjmZrKGvgDJl3AdGIcNOqvZRrqJSEiMLvVYrcVK0TZKGAsmqQQYQ9vNOJNvDViAQEKbqHgzQuv8In0txK-XZXOaGFgtKajr4vRF7J37JGgaywhUFDCnxPSbHtuexkTlKMMcwJEBWOwuG03Dpc_dkFrWYzNWban_DjJQKxbjoiWqYPhEAA7HEMV5Xsj9DF6L7FizIw"
}

Как с этим дальше работать, пока без идей :/

[Amiditin]

Создал PR #112

---

Если не добавлять ReCaptcha блок в форму Ninja Forms, то отправка данных успешно работает. Тогда возникает вопрос как использовать token, полученный из executeRecaptcha (react-google-recaptcha-v3), чтобы ReCaptcha работала.

В документации нашел api на использование токена. Поэтому убрал блок с ReCaptcha из Ninja Forms, и самостоятельно делаю проверку на валидность токена через сервис гугла.

Вопросы:

1. В реквесте verifyRecaptcha используется Secret Key, безопасно ли это?
2. Как запустить lint проверку локально?

[TorinAsakura]

1. verifyRecaptcha

1. Абсолютно точно нет, и я уже где-то рядом делал задачу на вынос чувствительных данных в переменные окружения, можешь взять и эту задачку, как только решишь эту
2. https://github.com/atls/tools/blob/master/yarn/plugin-check/src/check.command.ts

[Amiditin]

Вынос чувствительных данных в переменные окружения

Тут у меня скорее вопрос в безопасности того, что этот secret key используется в url запроса на верификацию (строка). Также написал todo комменты на вынос.

Прогресс

Залил новые коммиты на рефакторинг в PR #112

[TorinAsakura]

Этот вопрос надо поресёчить однозначно