Поводження з помилками з використанням реакції-аполлонаМутаційний гачок

Я намагався вирішити цю проблему, але не знайшов сильної відповіді на неї. Я намагаюся виконати мутацію входу, використовуючи гачок useMutation.

TLDR; Я хочу знати, в чому саме полягає різниця між переданим onError у параметрах та помилкою, яку мені надає useMutation

Ось мій фрагмент коду

const [login, { data, loading, error }] = useMutation(LOGIN_QUERY, {
        variables: {
            email,
            password
        },
        onError(err) {
            console.log(err);
        },
});

На стороні сервера у мене є заздалегідь заданий / жорсткий код електронної пошти, який використовується для входу в систему, і я не використовую Apollo або будь-якого іншого клієнта. У роздільній здатності цієї мутації для входу в систему я просто видаю помилку, якщо електронний лист не використовується

throw new Error('Invalid Email');

Тепер я хочу вирішити цю помилку на стороні клієнта (React). Але я хвилююсь, що якщо я використовую "помилку", повернуту з гачка useMutation, і намагаюся показати помилку таким чином

render() {
...
{error && <div> Error occured </div>}
...
}

помилка оновлюється в користувальницькому інтерфейсі, але потім негайно React показує мені екран із необробленим відхиленням (помилка): помилка Graphql: моє звичайне повідомлення про помилку

Але якщо я використовую onError, переданий в опціях для використання функціїMutate, він не показує мені цей екран, і я можу робити все, що хочу, з помилкою.

Я хочу знати, у чому саме різниця між передачею onError у параметрах та помилкою, яку мені дає useMutation, і чому React показує мені цей екран помилок, коли onError не використовується.

Дякую!

Apollo викриває два типи помилок через API: помилки GraphQL , які повертаються як частина відповіді errors, поряд із помилками мережіdata та помилками, що виникають при відмові запиту. Мережна помилка буде виникати, коли сервер не вдасться отримати або якщо відповідь не відрізняється від 200 - запити, які мають errorsвідповідь, все ще можуть мати статус 200. Але недійсний запит, наприклад, призведе до стан 400 і мережева помилка в Apollo Client.

Клієнт Apollo насправді пропонує чотири різні способи вирішення помилок мутації:

1.) Виклик mutateфункції, повернутої гаком, повертає Обіцянку. Якщо запит буде успішним, Обіцяння вирішиться на об’єкт відповіді, що включає dataповернений сервер. Якщо запит не вдасться, Обіцянка відхилить помилку. Ось чому ви бачите на консолі повідомлення "Непридатне відхилення" - вам потрібно обробити відхилену Обіцянку.

login()
  .then(({ data }) => {
    // you can do something with the response here
  })
  .catch(e => {
    // you can do something with the error here
  })

або з синтаксисом async / wait:

try {
  const { data } = await login()
} catch (e) {
  // do something with the error here
}

За замовчуванням Обіцянка буде відхиляти або помилки GraphQL, або мережеві помилки. Встановивши errorPolicy на ignoreабо all, хоча, Обіцяння буде відхиляти лише мережеві помилки. У цьому випадку помилки GraphQL все ще будуть доступні через об’єкт відповіді, але Обіцяння вирішиться.

2.) Єдиний виняток із вищезазначеного відбувається, коли ви надаєте onErrorфункцію. У цьому випадку Обіцянка завжди вирішиться замість відхилення, але якщо виникла помилка, onErrorбуде викликана помилка, що виникає. Налаштування, які errorPolicyви встановили, застосовуються і тут - onErrorзавжди будуть викликатися помилками в мережі, але викликатимуться лише помилками GraphQL при використанні стандартних errorPolicyпараметрів none. Використання onErrorеквівалентно лову відхиленої Обіцянки - вона просто переміщує обробник помилок з сайту викликуmutate функції на сайт виклику гака.

3.) Окрім mutateфункції, useMutationгачок також повертає об'єкт результату. Цей об’єкт також виявляє будь-які помилки, що виникають під час запуску мутації. На відміну від функцій обробника помилок, про які ми писали вище, цей errorоб'єкт представляє стан програми . І об'єкти, errorі dataоб'єкти, відкриті таким чином, існують як зручність. Вони рівноцінні цьому:

const [mutate] = useMutation(YOUR_MUTATION)
const [data, setData] = useState()
const [error, setError] = useState()
const handleClick = async () => {
  try {
    const { data } = await mutate()
    setData(data)
  catch (e) {
    setError(e)
  }
}

Такий стан помилок може бути корисним, коли ви бажаєте, щоб інтерфейс користувача відображав факт помилки. Наприклад, ви можете змінити колір елемента, поки мутація не запуститься без помилки. Замість того, щоб писати вищевказану котельну табличку самостійно, ви можете просто використовувати наданий об'єкт результату.

const [mutate, { data, error }] = useMutation(YOUR_MUTATION)

ПРИМІТКА. Хоча ви можете використовувати відкритий стан помилок для оновлення інтерфейсу користувача, це не є фактично заміною обробки помилки. Ви повинні або надати onErrorзворотний дзвінок, або catchпомилку, щоб уникнути попереджень про необроблене відхилення обіцянки.

4.) Нарешті, ви також можете використовувати apollo-link-error, щоб додати глобальну обробку помилок для своїх запитів. Це дозволяє, наприклад, відображати діалогове вікно про помилку незалежно від того, де у вашій програмі виник запит.

Який із цих методів ви використовуєте у своїй програмі, в значній мірі залежить від того, що ви намагаєтеся зробити (глобальний проти локального, стан проти зворотного виклику тощо). Більшість додатків використовуватиме більш ніж один метод обробки помилок.