ホームRailsの覚書Vue.jsの覚書MenuSidebarPrevNextSearchVue.js(Nuxt)でvue-apollo(apollo-module)を利用した際のエラーハンドリングはじめにVue.js/NuxtでGraphQLのクライアントを求めると、vue-apollo(apollo-module)に行き着くかと思います。clientは、非常に優れたライブラリでありまして、Vue.jsに限らず、ReactやAngulerなどでも利用されておりますそうしたvue-apolloですが、出会って当初はエラーハンドリングに悩むことかと存じます。リクエストの待ち時間に対する処理や、エラーが返ってきた場合の対応などです。個別にerrorコールバックに記述していたのでは、大変な作業となることでしょう。実装そこで細かいことは考えずに、丸っとコンポーネント化してみました。呼び出しについては、以下のような形となります。コンポーネント引数には、apolloのerrorコールバックの引数であるerrorから、error.graphQLErrorsと、$apolloインスタンスを渡しております。errorCodesはバックエンド側で定義したエラーコードです。スクリプトの最初で幾つかimportしているコンポーネントは、例外に応じてメッセージを表示する為のものです。どれも同じような作りとなっておりますので、ApolloLoadingのみ掲載します。ご存知の方も多いとは思いますが、v-で始まっているタグは、Vuetifyのタグです。vue.js向けに制作されたレスポンシブルなマテリアルデザインのフレームワークです。ElementやQuasarなどと並んで、とても人気のあるフレームワークだと思います。