Apollo-Mutationsfehler für Benutzer in Vue.js anzeigen?

Question

Ich verwende Vue.js mit Vue-Apollo und initiiere eine Benutzer-Mutation, um einen Benutzer anzumelden. Ich benutze den graph.cool Dienst.

Ich habe eine Anfrage Pipeline-Funktion, um einige Fehler, wie eine ungültige E-Mail zu fangen.

Wenn die Anfrage mit ungültiger/ungültiger Eingabe erfolgt, wird mein Fehler catch() ausgelöst (wie erwartet) und in der Registerkarte Netzwerk kann ich die JSON für die benutzerdefinierten Fehlermeldungen anzeigen. Aber wie greife ich auf diese Fehler/Antwort vom Catch aus, wenn ein Fehler von graph.cool ausgelöst wird?

Beispiel:

signin() { 
    const email = this.email 
    const password = this.password 

    this.$apollo.mutate({ 
    mutation: signinMutation, 
    variables: { 
     email, 
     password 
    } 
    }) 
    .then((data) => { 
    // This never fires on an error, so I can't 
    // show the user the errors in the network repsonse. 
    console.log(data) 
    }) 
    .catch((error) => { 
    // Error in this part fires in the console 
    // but I'm unable to show the JSON response 
    // errors because the 'then()' above doesn't execute. 
    console.error(error) 
    }) 
} 

ich folgende Fehlermeldung für einen nicht erkannten Benutzer erhalten:

Error: GraphQL error: No user found with that information at new ApolloError (eval at (app.js:956), :34:28) at eval (eval at (app.js:1353), :139:33) at

Jede Idee, wie die Fehler in der Reaktion zu zeigen, innerhalb der catch()?

Ich kann buchstäblich die Fehler sehe ich hier an den Benutzer in der Antwort auf die Registerkarte Netzwerk angezeigt werden soll:

... aber ich kann nicht herausfinden, wie es zu tun.

Jede Hilfe sehr geschätzt! Vielen Dank.

Answer 1

So sieht es aus, als ob ich dies Umgang mit dem falschen Weg, indem sie den falschen Baum anbellen.

Der Schlüssel zur Antwort war die Untersuchung des Fehlers von .catch() mit console.dir(error). Dies enthüllte einige nützliche Schlüssel ...nämlich:

error.graphQLErrors[0] 

Also alles in allem sieht der korrigierte Code wie folgt aus:

signin() { 
    const email = this.email 
    const password = this.password 

    this.$apollo.mutate({ 
    mutation: signinMutation, 
    variables: { 
     email, 
     password 
    } 
    }) 
    .then(data => { 
    console.log(data) 
    }) 
    .catch(error => { 
    console.log(graphQLErrorMessages(error)) 
    }) 
} 

Die graphQLErrorMessages() Funktion ein Helfer schrieb ich, so dass ich dies in anderen .catch() Blöcke wiederverwenden können:

Es gibt eine Reihe von Fehlermeldungen zurück (was ich brauchte), aber Sie könnten dies beliebig formatieren.

Es könnte ein wenig sein https://graph.cool spezifisch in seiner Logik (ich bin nicht so sicher), aber ich hoffe, dass dies landet hilft jemand auch in einer ähnlichen Situation stecken!

Answer 2

Ich mag Ihre Frage missverstehen, also bitte kommentieren und korrigieren Sie mich, wenn ich bin, aber es sieht so aus, als ob Sie Probleme mit Versprechen mehr als mit Vue oder GraphQL haben könnten.

Genau wie in einer try...catch Anweisung, sobald Sie einen Fehler finden, wird Ihr Programm weiterhin ausgeführt, es sei denn, Sie werfen den Fehler erneut. Zum Beispiel:

Diese fängt

try { 
    codeThatThrowsAnError(); 
} catch(e) { 
    // Do Nothing 
} 

Diese

try { 
    codeThatThrowsAnError(); 
} catch(e) { 
    throw new Error("Err 135: I failed") 
} 

Auch in Promise Land wieder wirft, können Sie entweder den Fehler fangen und bewegen sich wie Sie in Ihrem haben Beispiel, oder Sie können erneut werfen. Was Sie möglicherweise verpassen, ist, dass alles, was Sie von einer Catch-Anweisung zurückgeben, in der nächsten then verwendet wird. Zum Beispiel:

somethingReturningAFailedPromise() 
    .then(doWork) 
    .catch((err) => { 
    return "I'm a New Value" 
    }) 
    .then(console.log) 

//=> "I'm a New Value" 

Es klingt für mich wie das, was Sie brauchen, ist eine Datenfunktion, die belastbarer zum Scheitern wie folgt lautet:

const getUserProfile = (id) => { 
    return fetchUserData(id) 
    .catch((err) => { 
     logError(err); 
     return {}; 
    }) 
}