シングルページアプリケーション使いたいAPIがGraphQLで書かれていました。今回GraphQLを使うのが初めてだったので、クライアント側からのGraphQLの使い方について、簡単にメモしておこうと思います。GraphQLとは?GraphQLとは、Facebookが開発したAPIの仕様です。APIと比較して、APIの呼び出し回数や、データ受信量が少なくなるといったメリットがあります。APIだと、下記の事情により、データ取得に時間がかかります。ユーザー情報取得とフレンド一覧取得が、別々のエンドポイントになっていた場合、2度のAPI呼び出しが発生するユーザー名だけしか使わない場合でも、メールなどの他の情報も取得されてしまうこれをGraphQLで行うと、APIに下記のリクエストを1度送信するだけで、必要最小限のデータが取得できます。}}実際に試してみる公式ドキュメントのチュートリアルでは、スター・ウォーズのデータで説明されているので、同様にスター・ウォーズAPIのGraphQLラッパーで試しました。公式ドキュメントスター・ウォーズAPIhttps://graphql.org/swapi-graphql/https://swapi.apis.guru/ただし、公式ドキュメントの例と、スキーマが違うので注意が必要です。いったスキーマ(データ構造)かは、右上の「Docs」から調べることができます。GraphQLの基本的な考え方サーバーGraphQLは、まずサーバーで型が定義されていています。クライアントからは、取得したいデータの型とフィールドを指定して、そのデータを取得します。スター・ウォーズAPIのサーバーでは、下記のような型が定義されています。[String]}解説Rootはルートとなる型で、サーバーへの問い合わせはここから始まります(型名はサーバー側で任意に定義できるので、アクセスするGraphQLサーバーによって名前は変わります)Rootはperson関数を持ち、関数は指定したidの俳優(Person)を返しますPersonはid、name、birthYearなどのフィールドを持ちますPersonのfilmConnectionフィールドは、PersonFilemsConnection型で、Personの出演した映画(Film)の配列ですFilmはtitle、directorなどのフィールドを持ちますクライアントクライアントからは、ルートとなる型を起点に、型の構造に沿って、取得したいデータを記述して、それをGraphQLサーバーにリクエストします。Skywalkerの名前と性別を取得するのは下記クエリになります。}}解説query以下に、ルートとなる型を起点として、取得したいデータを記述します関数の引数は「<引数名>:<値>」で渡します結果はdata以下に、クエリで指定した構造で返されます配列要素も取得できます。その際、配列の指定は[]ではなく、要素と同じ{}でアクセスします。Skywalkerの出演映画名一覧を取得するには、下記クエリになります。}}以上が基本になります。サーバーは型で、クライアントからはその型を辿ると考えれば、イメージしやすいかと思います。エイリアスフィールド・関数に別名を付けることができます。変数を定義して、クエリに値を変数で渡すことができます。これにより、クエリのテンプレート化ができて便利です。<型>=<デフォルト値>」で行います型名は、サーバー側で設定されたものに合わせますデータの追加・更新データの追加・更新はqueryではなく、別途mutationというルートが用意されていて、そこで行います。}}呼び出し実際の呼び出しは、エンドポイントにデータをセットしたJSONをPOSTすることにより行います。JSONは、queryにクエリ文字列、variablesに変数のJSONをセットします。認証方法については、GraphQLでは決められておらず、サーバーの実装に任されています。ページングページングについては、GraphQLでは決められておらず、サーバーの実装に任されています。スター・ウォーズAPIで、俳優一覧を取得する場合、結果にページング情報も出力されるので、それを使ってページ指定をしてクエリをする仕様になっています。}}感想などSPAなどのアプリでサーバーからデータを取ってくる時、GraphQLだと呼び出し1回で済み、データ転送量も少なくなるので、ユーザーレスポンスが早くなります。Facebookが必要に迫られて開発したものって感じですね。使う側は楽でいいんですが、サーバー側はライブラリが用意されているものの、実装は面倒です。UX重視のアプリで使う分には導入メリットは大きいですが、レスポンス速度を気にしない情報提供APIだと、実装が面倒な割にはメリットはないかなと思いました。そのあたりが、GraphQLがいまいち流行らない理由ですかね。1引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。