Vue.jsでApollo変異のエラーをユーザーに表示しますか？

Question

私はVue.jsをVue-Apolloと使用しており、ユーザーにサインインするためにユーザーの突然変異を開始しています。私はgraph.coolサービスを使用しています。

私は無効な電子メールのようないくつかのエラーを捕まえるためのリクエストパイプライン機能のセットアップを持っています。

悪い/無効な入力が要求された場合、私のエラーcatch()が（期待通りに）起動し、ネットワークのタブにカスタムエラーメッセージのJSONが表示されます。しかし、エラーがgraph.coolからトリガされた場合、どのようにこれらのエラー/レスポンスにキャッチ内からアクセスできますか？

例：

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) 
    }) 
} 

私は認識されていないユーザーのために、次のエラーを取得：

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

任意のアイデアはどのようにcatch()内から応答でエラーを表示するには？

私は、文字通り、私はここでネットワーク]タブ上の応答でユーザに表示するエラーを表示することができます

...しかし、私はそれを行う方法を見つけ出すことはできません。

ご迷惑をおかけして申し訳ありません。ありがとうございました。

Answer 1

は、それが見えます間違った木を吠えることで間違った方法。

.catch()からのエラーを調べるための鍵は、console.dir(error)です。これはいくつかの有用な鍵を明らかにした...すなわち：

error.graphQLErrors[0] 

したがって、すべてのすべてで、修正されたコードは次のようになります。私は他の.catch()のブロックでこれを再利用することができるように

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)) 
    }) 
} 

graphQLErrorMessages()機能は、私が書いたヘルパーです：

function graphQLErrorMessages (errorsFromCatch) { 
    const errors = errorsFromCatch.graphQLErrors[0] 
    const messages = [] 

    if (errors.hasOwnProperty('functionError')) { 
    const customErrors = JSON.parse(errors.functionError) 
    messages.push(...customErrors.errors) 
    } else { 
    messages.push(errors.message) 
    } 

    return messages 
} 

エラーメッセージの配列を返します（これは私の必要なものです）が、好きなようにフォーマットすることができます。

これは論理的には少し具体的かもしれませんが（私はあまりよく分かりませんが）、これは誰かが同様の状況で立ち往生するのを手伝ってくれることを願っています！

Answer 2

私はあなたの質問を誤解している可能性がありますので、私にはコメントしてください。あなたはVueやGraphQLよりも約束が苦手なようです。

try...catchステートメントの場合と同じように、エラーが発生すると、エラーを再スローするまでプログラムは実行を継続します。たとえば、次のように

これは

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

この

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

同様に、約束の地に、あなたがエラーをキャッチし、あなたの中に持っているように移動することができますいずれかを再スローをキャッチ例、または再スローすることができます。あなたが見逃す可能性があることは、catchステートメントから返されたものが次のthenで使用されることです。例えば：それはあなたが必要なもののように私に聞こえる

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

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

は、以下のような障害のために、より弾力性のあるデータ機能である：私は、この処理していたかのように

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