なにこれ
Nuxt.js＋GraphQLの知識がこれから必要になるので**「Hello, GraphQL for client-side!」を読んだところ、非常にサクっと学ぶことができたので感想を書きます。 GraphQLでサーバーと通信するには「Apollo Client」**というライブラリを使用します。 Nuxt.jsではApollo Clientを使いやすくしたライブラリである **「apollo-module」が用意されており、本書は主に「apollo-moduleの設定方法・実装方法についてチュートリアル形式で学べる一冊」になっていました。ボリュームも46ページとそんなに多くないので、「1日～2日で読める」内容です。 ただNuxt.jsの説明は端折っていたり、VuexのStoreのdispatchも知っている前提なので「Nuxt.js触ったことある人向け」**かなと感じました。
目次
第1章は冒頭6ページまでで、第2章がメインです。
- <第1章> GraphQLとは？
- 1.1. 概要
- 1.2. Apollo Client
- <第2章> GraphQL with Nuxt.js
- 2.1. 概要
- 2.2. Nuxt.js
- 2.3. apollo-module
- 2.4. クエリの書き方
- 2.5. 取得（Queries）
- 2.6. 更新（Mutation）
- 2.7. エラーハンドリングについて
- 2.8. オフライン対応について
- 2.9. テスト
- 2.10. 良い使い方
- 2.11. 周辺ライブラリ・エコシステム
- 2.12. まとめ
本の感想
公式ドキュメントや他サイトを多く紹介してくれている
文章中にNuxt.js+GraphQLを学んでいくうえで参考になるサイトを多く紹介してくれています。 そのため**「読了後も紹介先を見ながら理解を深めていける」**のが良い点です。 本書に紹介されているものと、それに付随して自分で調べたものを以下にまとめました。
- Apollo ClientのAPIリファレンス
- apollo-devtools
- Chromeの拡張機能です。開発者ツールでアプリのGraphQLサーバーに対してクエリの送信・取得ができます。
- GitHub GraphQL API explorer
- GitHubが提供しているGraphQLのAPIを叩けるオンラインエディターです。
- とりあえずGraphQLを試したいならココがオススメです。
- GraphiQL
- ブラウザ上でGraphQLのIEDを実現するライブラリです。GraphQLを調べているとよく出てきます。
- 機能がシンプル過ぎて、HTTPヘッダーを追加できない（つまり認証情報が乗せられない）などのデメリットがあります。
- Altair
- GraphiQLよりリッチなGraphQLのIEDです。Chrome拡張機能、Electronアプリ、Webサイトなどのさまざまな形式で提供されています。
- HTTPヘッダー情報などを追加できるので認証が必要なAPIも叩けます。
テストについてもチュートリアルがあるのは助かる
実際の開発だとテストコードは必須なので、プロダクションコードだけでなくGraphQLのモックを使ったテストが紹介されていて非常にありがたいです。
サンプルコードを見ながら読み進めたほうが良い
本書ではチュートリアル形式でサンプルアプリを作っていきますが、記載しているソースコードのファイルパスは書かれていないことが多いので、そこらへんはサンプルコードが理解の助けになります。あと必要なライブラリのyarn addも「明示してないけど適宜やってね」という感じでした。
GitHubのトークンはハードコードしないほうが良いのでは？
GitHubのアクセストークンをソースコードにハードコードするよりは、@nuxtjs/dotenvを使う方法を載せておいたほうが親切かなと思いました。実際サンプルコードは@nuxtjs/dotenvを使っていますし。
誤植？
自分の認識ミスかもしれませんが...
- （P9）
apollo-moduleとapollo-link-httpをインストールします。の直後のコマンドがyarn add @nuxtjs/apolloになっています。正しくはyarn add @nuxtjs/apollo apollo-link-httpです。 - （32P）型「URI」は「String」です。GraphQLにURIという型はないし、32Pの型定義にもURIの定義はないので、おそらく「String」かと思います。
- （33P）reposMockのviewer.repositories.nodesは配列なので[]で囲む必要があります。
- （33P）addMockFunctionsToSchemaにセットするオブジェクトのプロパティは
mockではなくmocksです。 - （39P）「予期せぬネラー」は「予期せぬエラー」です。
まとめ
Nuxt.js＋GraphQLをまだ始めたばかりですが、**「Hello, GraphQL for client-side!」**は最初のとっかかりとしてオススメの一冊でした。これでapollo-moduleの設定・実装・テストの必要最低限を把握できたので、次のステップとしては、以下を参考に、サンプルアプリを作ったりAppoloのキャッシュまわりの設計について取り組むのが良いかなぁと考えています。
🍅
