Apollo Client Devtoolsについて

宮﨑

2021/12/04

この記事はiCARE Dev Advent Calendar 2021 4日目です。
こんにちは、フロントエンドエンジニアの宮﨑です。
今回のブログでは、Apollo Client Devtoolsについて紹介したいと思います。
先日このツールのことを知ったため、実務ではまだ使ったことがありません。
これから活用していけるように、機能や使い方について調べてみました。

1. Apollo Client Devtoolsとは

Apollo Client DevtoolsはApollo ClientのためのGraphQLデバッキングツールです。
提供元はApollo Graph Inc.で、ChromeとFirefoxで拡張機能を提供しています。
Chrome や FirefoxのWebストアからインスールが可能です。
拡張機能を導入すると、Webブラウザの検証ツールタブにApolloと表示されます。
本番環境で利用する場合は別途設定が必要になります。
Apollo_Dev_Tools_image

2. Apollo Client Devtoolsの機能

Apollo Client Devtoolsの主な機能は以下の４つです。

EXPLORER
Apollo Clientインスタンスで設定したWebアプリケーションのサーバへクエリを送信したり、Apollo Clientキャッシュにクエリを送信して、どのデータがロードされたかを確かめることができます。
QUERIES
Webアプリケーションページ内のquery、variables、キャッシュ結果を表示したり、個別にqueryを再実行することができます。
MUTATIONS
Webアプリケーションページ内のmutationやvariablesを表示したり、個別にmutationを再実行することができます。
CACHE
Apollo Clientキャッシュを可視化し、field名やvalueなどで検索することができます。

3. Apollo Client Devtoolsの使い方

今回はGitHub が提供する GraphQL API を使って使い方をみていきたいと思います。

EXPLORER
EXPLORERでは GraphiQL のような使い方が可能です。
画面左側から実行したいquery/mutationを選択します。
選択すると自動的にOperations画面に表示されます。
ArgumentsやFieldsも選択するとOperationsに自動的に追加されます。
Operations下部のVariablesに渡したい値を入力します。
Operations内に表示されるミートボールメニューをクリックすると、オペレーションコピーなどのオプションが表示されます。
query/mutationを実行するときは、Operations右側にあるボタンをクリックします。
結果は画面右側のResponseに表示されます。
Responseでは、データをコピーまたはjsonファイルでダウンロードすることが可能です。
QUERIES
この画面では、EXPLORERで実行したqueryや、ブラウザに表示しているページで実行されたquery一覧が表示されます。
Query String、Variablesやキャッシュされたデータを確認またはコピーできます。
右上にあるRun in ExplorerをクリックするとEXPLORERページに遷移します。
MUTATIONS
この画面では、EXPLORERで実行したmutationやブラウザに表示しているページで実行されたmutaion一覧が表示されます。
Mutation String、Variablesを確認またはコピーできます。
右上にあるRun in ExplorerをクリックするとEXPLORERページに遷移します。
CACHE
Apollo Client キャッシュは識別された各オブジェクトに対してキャッシュ ID を生成します。
デフォルトでは、オブジェクトのキャッシュIDは、オブジェクトの__typenameフィールドとid（または_id）フィールドをコロン(:)で区切って連結したものです。
Apollo Client DevtoolsのCACHEではそのキャッシュIDの一覧を表示し、キャッシュID内のデータを確認することができます。