Vue.js(Nuxt)でvue-apollo(apollo-module)を利用した際のエラーハンドリング

はじめに

Vue.js/NuxtでGraphQLのクライアントを求めると、vue-apollo(apollo-module)に行き着くかと思います。そのコアコンポーネントとなるApollo clientは、非常に優れたライブラリでありまして、Vue.jsに限らず、ReactやAngulerなどでも利用されております

そうしたvue-apolloですが、出会って当初はエラーハンドリングに悩むことかと存じます。リクエストの待ち時間に対する処理や、エラーが返ってきた場合の対応などです。個別にerrorコールバックに記述していたのでは、大変な作業となることでしょう。

実装

そこで細かいことは考えずに、丸っとコンポーネント化してみました。

呼び出しについては、以下のような形となります。

コンポーネント引数には、apolloのerrorコールバックの引数であるerrorから、error.graphQLErrorsと、$apolloインスタンスを渡しております。また、errorCodesはバックエンド側で定義したエラーコードです。

スクリプトの最初で幾つかimportしているコンポーネントは、例外に応じてメッセージを表示する為のものです。どれも同じような作りとなっておりますので、ApolloLoadingのみ掲載します。

ご存知の方も多いとは思いますが、v-で始まっているタグは、Vuetifyのタグです。vue.js向けに制作されたレスポンシブルなマテリアルデザインのフレームワークです。ElementやQuasarなどと並んで、とても人気のあるフレームワークだと思います。