Apollo stellt über seine API zwei Arten von Fehlern bereit : GraphQL-Fehler , die als Teil der Antwort zurückgegeben errors
werden data
, sowie Netzwerkfehler, die auftreten, wenn eine Anforderung fehlschlägt. Ein Netzwerkfehler tritt auf, wenn ein Server nicht erreicht werden kann oder wenn der Antwortstatus nicht 200 ist. Abfragen, die errors
in der Antwort enthalten sind, können weiterhin den Status 200 haben. Eine ungültige Abfrage führt jedoch beispielsweise dazu ein 400-Status und ein Netzwerkfehler in Apollo Client.
Apollo Client bietet vier verschiedene Möglichkeiten, um Mutationsfehler zu behandeln:
1.) Das Aufrufen der mutate
vom Hook zurückgegebenen Funktion gibt ein Versprechen zurück. Wenn die Anforderung erfolgreich ist, wird das Versprechen lösen zu einem Antwortobjekt , das das enthält data
vom Server zurückgegeben. Wenn die Anforderung fehlschlägt, wird das Versprechen mit dem Fehler abgelehnt . Aus diesem Grund wird in der Konsole die Meldung "Nicht behandelte Ablehnung" angezeigt. Sie müssen das abgelehnte Versprechen bearbeiten.
login()
.then(({ data }) => {
// you can do something with the response here
})
.catch(e => {
// you can do something with the error here
})
oder mit asynchroner / warten-Syntax:
try {
const { data } = await login()
} catch (e) {
// do something with the error here
}
Standardmäßig lehnt das Versprechen entweder GraphQL-Fehler oder Netzwerkfehler ab. Wenn Sie die errorPolicy auf ignore
oder setzen all
, wird das Versprechen nur bei Netzwerkfehlern zurückgewiesen. In diesem Fall ist der Zugriff auf die GraphQL-Fehler weiterhin über das Antwortobjekt möglich, das Versprechen wird jedoch aufgelöst.
2.) Die einzige Ausnahme zu dem oben genannten tritt auf, wenn Sie eine onError
Funktion bereitstellen . In diesem Fall wird das Versprechen immer aufgelöst, anstatt es abzulehnen. Wenn jedoch ein Fehler auftritt, onError
wird es mit dem resultierenden Fehler aufgerufen. Das von errorPolicy
Ihnen festgelegte gilt auch hier - onError
wird immer für Netzwerkfehler aufgerufen, aber nur mit GraphQL-Fehlern, wenn die Standardeinstellung errorPolicy
von verwendet wird none
. Die Verwendung onError
entspricht dem Abfangen des abgelehnten Versprechens. Der Fehlerhandler wird lediglich von der Aufrufstelle der mutate
Funktion zur Aufrufstelle des Hooks verschoben.
3.) Zusätzlich zur mutate
Funktion gibt der useMutation
Hook auch ein Ergebnisobjekt zurück. Dieses Objekt macht auch alle Fehler sichtbar, die beim Ausführen der Mutation auftreten. Im Gegensatz zu den oben beschriebenen Fehlerbehandlungsfunktionen error
repräsentiert dieses Objekt den Anwendungsstatus . Sowohl die error
als auch data
die auf diese Weise belichteten Objekte dienen als Annehmlichkeit. Sie sind gleichbedeutend damit:
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)
}
}
Ein solcher Fehlerstatus kann hilfreich sein, wenn Ihre Benutzeroberfläche die Tatsache widerspiegeln soll, dass ein Fehler vorliegt. Sie können beispielsweise die Farbe eines Elements ändern, bis die Mutation fehlerfrei ausgeführt wird. Anstatt das obige Boilerplate selbst schreiben zu müssen, können Sie einfach das bereitgestellte Ergebnisobjekt verwenden.
const [mutate, { data, error }] = useMutation(YOUR_MUTATION)
HINWEIS: Sie können zwar den Status des exponierten Fehlers verwenden, um Ihre Benutzeroberfläche zu aktualisieren, dies ist jedoch kein Ersatz für die tatsächliche Behandlung des Fehlers. Sie müssen entweder einen onError
Rückruf oder catch
den Fehler angeben, um Warnungen vor einer nicht behandelten Ablehnung eines Versprechens zu vermeiden.
4.) Schließlich können Sie auch Apollo-Link-Fehler verwenden , um eine globale Fehlerbehandlung für Ihre Anforderungen hinzuzufügen . Auf diese Weise können Sie beispielsweise einen Fehlerdialog anzeigen, unabhängig davon, woher die Anforderung in Ihrer Anwendung stammt.
Welche dieser Methoden Sie in Ihrer Anwendung verwenden, hängt stark davon ab, was Sie tun möchten (global oder lokal, Status oder Rückruf usw.). Die meisten Anwendungen verwenden mehr als eine Methode zur Fehlerbehandlung.