GraphQLを触ってみた

The better Restとの触れ込みのあるGraphQLを触ってみた。

GraphQLとは何か?

ここ数年、Webではスタンダードとして使われていたRest APIに対する不満から生まれたバックエンドとフロントエンド間の通信規約である。具体的には主に下記のようなものを課題として捉えている。

課題1 endpointから返されるデータを全部使わない(Over-fetching)

たとえばユーザのプロフィール画面を作りたくて、/user/profiesのエンドポイントを叩いたとする。大体の場合は、これのレスポンスに含まれるすべてのデータは必要とせずに、一部のデータのみ使うであろう。使われないデータは無駄であり、結果として効率的でない通信のやり取りに繋がる。

課題2 endpointをいくつも叩かなければいけない(Under-fetching)

Over-fetchingと表裏一体ではあるのだが、一つの画面に必要となるデータをやり取りするにも、 user/<id>を叩き、次にuser/<id>/profiles、そして最後にuser/<id>/photosの３つのendpointを叩く必要になることがある。これは一つのendpointから返されるレスポインスでは足りないがために起き、そのため複数のendpointへの通信が過剰に走ることになる。パフォーマンスの観点からは基本的にフロントエンドとバックエンド間の通信は少なければ少ないほど好ましい。

課題3 endpoint作成のコストが高い

endpointを一個作るにはフロントエンド・バックエンド側双方の調整が必要となるため、作成のコストが高い。

実際に作ってみた

GraphQLを推進する会社にApollo社がある。Apollo社が提供するApollo Serverを使うと比較的かんたんにGraphQLを試すことができる。

Getting started

出だしに書いてあったとおり、本当に10分で雰囲気がつかめる。もしかしたら10分もいらないかも。

感想

npmで初期化するだけで、playgroundがついてくるのは便利。ただ、ドキュメントが不親切で断片的なコードしか書いてないため、ちょっとした改良をするにも試行錯誤が必要。急がばまわれ的に、まずはapollo serverを使わない素のgraphql.jsなどを触って基礎を先に身につけたほうが良さそう。