Voyagerクライアント入門

Gato GraphQLは、GraphQLスキーマをインタラクティブに可視化するためのGraphQL Voyagerクライアントを提供しています。プラグインのメニューにある「Interactive Schema」をクリックしてアクセスします：

Voyagerは、GraphQLスキーマの全体像を俯瞰的に表示します：

スキーマ内のすべての要素がどのように関連し合っているかを、型間の接続を矢印で示すことで、わかりやすく理解できます：

スキーマにはすべての関係を算出する起点となる型があります。デフォルトでは、これはクエリルート（この場合、QueryRoot型で処理されます）であり、下部のフローティングパネルに表示されます。ミューテーションに関するスキーマを可視化するには、対応するミューテーションルート型（この場合、MutationRoot）を選択します：

スキーマ上の型をクリックすると、その接続がハイライトされ、フィールドのメタデータが表示されます（左側パネルで型名をクリックした場合も同様です）：

左側パネルの検索入力欄を使用して、スキーマ要素をフィルタリングできます：

接続をクリックすると、スキーマ上と左側パネルの両方でハイライトされます：

マウス（および画面右下のボタン）を使用して、グラフ内をナビゲートし、ズームイン・アウト、任意の方向への移動、要素へのフォーカスができます：

下部のフローティングパネルには、追加のオプションがいくつかあります：

• "Sort by alphabet" — 各型のすべてのフィールドをアルファベット順に並べ替えます
• "Skip Relay" — Relayのラッパークラスを非表示にします
• "Skip deprecated" — 廃止予定のフィールドをすべて非表示にします
• "Show leaf fields" — 接続ではないフィールドをすべて表示します