Необработанный отказ (ошибка): сообщение не должно быть пустым

Я обрабатываю ошибку с помощью метода обработки ошибок useMutation, однако после того, как я пытаюсь проверить обработку ошибок, публикуя пустой пост, он показывает ошибку в пользовательском интерфейсе, а затем сразу после того, как приложение прерывается, и я получаю указанную выше ошибку.

const [createPost, { error }] = useMutation(CREATE_POST_MUTATION, {
variables: values,
update(proxy, result) {
  const data = proxy.readQuery({
    query: FETCH_POSTS_QUERY,
  });

  let newData = [...data.getPosts];
  newData = [result.data.createPost, ...newData];
  proxy.writeQuery({
    query: FETCH_POSTS_QUERY,
    data: {
      ...data,
      getPosts: {
        newData,
      },
    },
  });
  values.body = '';
}
});

''

{error && (
    <div className = "ui error message" style = {{ marginBottom: 20 }}>
      <ul className = "list">
        <li>{error.graphQLErrors[0].message}</li>
      </ul>
    </div>
  )}

console.info данные, которые вы отправляете на сервер

Or Assayag 15.12.2020 20:31

@OrAssayag отправляет пустую строку, которая является телом сообщения, когда отправляется пустым, но сервер возвращает ошибку, которую я показываю во внешнем интерфейсе, но по какой-то причине все равно выдает ошибку

Abdelwahab 16.12.2020 01:22
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
2
480
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я нашел свое решение здесь Обработка ошибок с помощью хука react-apollo useMutation

ПРИМЕЧАНИЕ. Хотя вы можете использовать открытое состояние ошибки для обновления своего пользовательского интерфейса, это не заменяет фактическую обработку ошибки. Вы должны либо предоставить обратный вызов onError, либо перехватить ошибку, чтобы избежать предупреждений о необработанном отклонении промиса.

Или другой способ: вы можете отключить кнопку, которая не вызовет ошибки. Если в теле нет текста, кнопка не будет активной. Он не будет активен, если есть только пробелы.

<Button disabled = {!values.body.trim()} type = "Submit" color = "teal">
  Submit
</Button>

Другие вопросы по теме