GraphiQLの使い方

GraphQLを使う上で、必要不可欠なツールにGraphiQL(「グラフィカル」)があります。このツールを使うとブラウザ上でクエリを組み立てて実行することができます。

GraphQLのサイトでは、スターウォーズの登場人物などのデータにアクセスできる SWAPIのGraphQL版が紹介されています。

GraphiQL for SWAPI

こちらのサイトを開いて試しながら勉強しましょう。

右上にDocsのリンクがあります。 Docsを見ると、どのようなクエリやタイプがあるかが分かります。

例えばallFilmsというのはすべてのフィルムに関する情報を取得するクエリで、 FilmConnectionを経由してFilmを取得できます。 Filmにはタイトルやリリース日などのフィールドが用意されています。

allPeopleやallVehiclesなどのクエリもあるのでどんなフィールドがあるか眺めてみましょう。

このDocsの情報はGraphQLのスキーマを書くだけで作成されます。またスキーマ中にコメントを書くことでDocsの内容を拡充することもできます。

左のテキストペインがクエリを入力するところです。クエリは補完機能を使って組み立てると簡単です。

まず、 {} を入力してからエンターで行を追加してみましょう。このブラケット内でShift-Spaceを押すと、クエリの候補が出ます。例えば、allPeopleを選択しましょう。

さらに、 {} を入力して行を追加してからShift-Spaceを押します。今回はtotalCountとpeopleを追加しましょう。

peopleの中身もさらに組み立てます。 nameとgenderとhomeworldを追加してみましょう。 homeworldにはさらにnameを追加しましょう。

上部の実行ボタンを押すとクエリが実行され、右側のテキストペインに結果が表示されます。 peopleは配列になって複数返ってきます。

件数が多い場合はpageInfoやafterなどを使ってページングも実現できます。

GraphQLの機能としてクエリのバリデーションがあります。試しにクエリを間違えて書いて見てどのようなエラーがでるか確認してみましょう。

今回は扱いませんでしたが、query variableを使うと queryに引数を与えることができます。また、データを取得するqueryだけではなくデータを書き換えるタイプの mutationもあります。 mutationも厳密にはqueryの一種なので同じように使うことができます。