2021/06/05
最近APIで使われるGraphQLについて調べてみました
APIからデータを取得するとき、従来よく使われていたREST APIでは、取得するデータの種類の分、エンドポイント(アクセスするURL)やパラメータの設定が必要でした。
また、APIではJSONという階層構造を持ったデータ形式を使いますが、
REST APIでは取得するデータに必要のないデータが付随するなど、通信に無駄が生じてしまう場合も少なくありませんでした。
そうした中、JSONでのデータの受け渡しをより便利にするために誕生したのが GraphQL です。
例えば以下のようなデータがあったとします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | [ { id: 1, name: "Ninomiya", favorites: [ { id: 1, name: 'Mikan', create_at: '2021-05-01 12:00' }, { id: 2, name: 'Katsuo', create_at: '2021-05-05 16:12' } ] }, ... ] |
REST APIではここから user id 1のfavoritesを取得する場合に、例えば次のようなURLにアクセスします。
1 | https://api.hogehoge.com/user/1/favorite |
あるいは
1 | https://api.hogehoge.com/user/?id=1&get=favorite |
など、取得する情報により、アクセスするURLが変わったりします。
更にここから得られるデータは以下のように返ってきたりします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | { "data": { "id": 1, "name": "Ninomiya", "favorites": [ { "id": 1, "name": "Mikan", "create_at": "2021-05-01 12:00" }, { "id": 2, "name": "Katsuo", "create_at": "2021-05-05 16:12" } ] } } |
本来必要なデータはfavoriteのnameの一覧だけであったとしても、関係のないデータまで返ってきてしまいます。
GraphQLでは、以下のようなURLにアクセスし、
1 | https://api.hogehoge.com |
以下のようなqueryを投げます。
1 2 3 4 5 6 7 | { user(id: 1){ favorites { name } } } |
そうすると以下のようにデータが返ってきます。
1 2 3 4 5 6 7 8 9 10 11 12 | { "data": { "favorites": [ { "name": "Mikan" }, { "name": "Katsuo" } ] } } |
必要なデータを同じURLに対してリクエストできるので、プログラムをより簡略化し、通信量を節約できます。
参考にさせていただいたサイト
Author Profile
NINOMIYA
Webデザイナー兼コーダー出身のフロントエンド開発者です。 UXデザインやチーム開発の効率化など、勉強中です。
SHARE