つい最近、社内ハッカソンでGraphQLのライブラリである、ApolloのApollo Client(React版)を触ってみた。その時に、公式のGetting Startedを動かすのに少し手間取ったので、ここに手順をまとめておく。
最後に、GraphQLを触ってみたときの所感を簡単にまとめる。
公式のGetting Startedの記事は以下を参照。
www.apollographql.com
- 環境
- 1. Reactのインストール
- 2. graphqlとApollo Clientのインストール
- 3. コンソール上で実行するClientの作成
- 4. Apollo ClientをReact Appに組み込む
- 5. まとめ
環境
Getting Startedを試した時のNode.js、React、Apollo Clientおよび、graphql のバージョンを記載しておく。
1. Reactのインストール
Apollo ClientのGetting Startedでは最終的にReactに組み込むところまで行う。また、create-react-appは空のディレクトリに対して実施しないとエラーになる。なので、最初にcreate-react-appを使ってReact環境をインストールしておく。ちなみに今回はtypescript環境でreact appを作成する。
npx create-react-app --template typescript
2. graphqlとApollo Clientのインストール
ここから、Getting Startedに従いGraphQLを試す。
ドキュメントに従い、必要なモジュールをインストールする。
yarn add @apollo/client graphql
3. コンソール上で実行するClientの作成
次に、ドキュメントに従い@apollo/clientを使ってGraphQLでサーバからリソースを取得し、コンソール上に出力するサンプルを作成する。
が、どうやらドキュメントに記載されているコードは@apollo/clientの古いバージョンらしく、現バージョンでは動かなかったので以下の様に修正する。また、import/exportを使っているため、ESMをそのまま実行できる様にファイル名をindex.mjsで保存する。
gist.github.com
以下のコマンドで実行すると、各通貨のUSDとの交換レートが表示される。
node index.mjs
4. Apollo ClientをReact Appに組み込む
ここからはReactにApollo Clientを組み込む手順を説明する。公式ドキュメントにある通り、Apollo Clientのインスタンスを生成し、<ApoloProvider>で囲むことで、子供のcomponentに対してインジェクトする。
4-1. src/index.tsxを修正
ここではcreate-react-appで生成されたコードを書き換えていく。まずはsrc/index.tsxを以下の様に修正する。
gist.github.com
4-2. ExchangeRatesコンポーネントの作成
続いて、公式ドキュメントにあるようにExchangeRatesコンポーネントを作成する。以下の内容で、`src/ExchangeRates.tsx`として保存する。
gist.github.com
4-3. AppコンポーネントにExchangeRatesを組み込む
最後に、App.tsxからExchangeRatesを呼ぶ様に`src/App.tsx`を以下のように修正する。
gist.github.com
5. まとめ
GraphQLは説明の通りClientが任意のリソースを取得するために開発されたクエリ言語である。RESTでは必要なリソースを取得するために、指定されたURIにアクセスするが、GraphQLでは必要なリソースを取得するために任意のクエリを作成するという使い方に変わる。
そのため、RESTからGraphQLに乗り換える場合は結構大きな変更が必要になる。というか、今までRESTで動いていたものをGraphQLに置き換える場合はサーバもクライアントもほとんど作り直しになるだろう。
GraphQLではClientからリソースを取得するのは簡単ではあるが、裏を返せば、それらクエリに対して任意のリソースを返すためのサーバ側を準備するのはそこそこ大変そうと感じた。今回はClient側の使い方しか確認していないが。。。
実際に業務で使う場合は、RESTとGraphQLは必要に応じて使い分けかと思う。一覧と詳細表示がシンプルなものはRESTの方が作りやすいし、Clientがより多様な表示を求めるものであればGraphQLにしておくことでサーバ側の開発コストが下げられるかもしれない。
この辺りは実際に業務で使ってみないと何とも結論は出せないと思った。
