Через API-интерфейс Apollo предоставляет два вида ошибок: ошибки GraphQL , которые возвращаются как часть ответа errors
, data
а также сетевые ошибки, возникающие при сбое запроса. Сетевая ошибка возникает, когда не удается связаться с сервером, или если состояние ответа не равно 200 - запросы, которые имеют errors
в ответе, могут по-прежнему иметь статус 200. Но недопустимый запрос, например, приведет к статус 400 и ошибка сети в клиенте Apollo.
Apollo Client фактически предоставляет четыре различных способа обработки ошибок мутации:
1.) Вызов mutate
функции, возвращаемой ловушкой, возвращает Promise. Если запрос выполнен успешно, Promise преобразуется в объект ответа, который включает в себя data
возвращенный сервером. В случае сбоя запроса Обещание будет отклонено с ошибкой. Вот почему вы видите сообщение «Unhandled Rejection» в консоли - вам нужно обработать отклоненное обещание.
login()
.then(({ data }) => {
// you can do something with the response here
})
.catch(e => {
// you can do something with the error here
})
или с синтаксисом async / await:
try {
const { data } = await login()
} catch (e) {
// do something with the error here
}
По умолчанию Promise будет отклонять либо ошибки GraphQL, либо ошибки сети. Установив errorPolicy к ignore
или all
, хотя, обещание будет только отказаться от сетевых ошибок. В этом случае ошибки GraphQL будут по-прежнему доступны через объект ответа, но Обещание разрешится.
2.) Единственное исключение из вышеперечисленного возникает, когда вы предоставляете onError
функцию. В этом случае Обещание всегда будет разрешаться, а не отклоняться, но если возникнет ошибка, onError
будет вызвана полученная ошибка. errorPolicy
Установить применяется здесь - onError
всегда будет вызываться для сетевых ошибок , но будет вызываться только с ошибками GraphQL при использовании по умолчанию errorPolicy
в none
. Использование onError
эквивалентно перехвату отклоненного Promise - оно просто перемещает обработчик ошибок с сайта вызова 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, чтобы добавить глобальную обработку ошибок для ваших запросов. Это позволяет, например, отображать диалоговое окно с сообщением об ошибке независимо от того, где в вашем приложении возник запрос.
Какой из этих методов вы используете в своем приложении, сильно зависит от того, что вы пытаетесь сделать (глобальный против локального, состояние против обратного вызова и т. Д.). В большинстве приложений будет использоваться более одного метода обработки ошибок.