GraphQL および周辺技術にキャッチアップするための自分用メモ。
やること
- GraphQL
- 概要
- REST API との違い
- その他 GraphQL に関すること
登場人物
まずは概要をざっくり理解するために出てくる主な言葉の理解から。
GraphQL
GraphQL は、クライアントとサーバサイドのデータ取得、応答をを行うためのクエリ言語。従来からデファクトスタンダードだった REST API の大体として 旧 Facebook 社によって作成され、今では GitHub や YouTube をはじめ多くのプロダクトの本番環境で利用されている。
![GraphQL | A query language for your API](/img/og-image.png)
GraphQL の特徴
- 柔軟なデータ取得
- REST API の課題でもあるオーバーフェッチングを解決する最も目玉な特徴(だと僕が思っている)。クライアントは、必要なデータを明示的に指定することで、不要なデータの取得やリクエストを複数回にわたって行うことを防ぐことができる。
- 単一エンドポイント
- GraphQL では通常単一のエンドポイントにより API が提供される。リソースとリソースへの操作によって HTTP メソッド、エンドポイントが存在する REST API と大きく異なる部分ではある。
- まだあんまり理解できていないが、単一エンドポイントにリクエストが集中することに対するパフォーマンスととかへの影響はあるのだろうか 🤔
- スキーマ
- GraphQL は厳密は型システムを提供するため、クライアントとサーバ間でデータの一貫性を保つことできる。
Query
GraphQL でデータを取得する際に使用する。
一番シンプルなクエリで以下は、ユーザの一覧を取得するクエリとなっている。 user というフィールドのプロパティとして name, email を指定しているが、クライアント側が他にも取得したいプロパティがあれば随時追加するといった形でオーバーフェッチングを防ぐ。
query {
user {
name
email
# age 随時追加していく
}
}
続いてユーザの一覧から任意の id のユーザのみを取得するクエリはこんなかんじ。
フィールドに引数を渡すことが可能で、データのフィルタリングなどに使用できる。
query {
user(id: 123) {
id
name
email
}
}
さらにネストされたデータの取得はこんなかんじで記述できる。リレーショナルデータベースでリレーションを持つ子要素のデータを取得したい場合も対応できる。例えばユーザの情報に加えて、そのユーザが投稿した記事の一覧も欲しい場合は以下のように書く。
query {
user(id: 123) {
id
name
posts {
title
description
}
}
}
Fragment
GraphQL で共通するものをまとめて再利用可能にする機能。任意の型に対して定義でき、Query の中で JavaScript のスプレッド構文で利用できる。
fragment UserName on User {
firstname
lastname
}
query {
user {
id
email
...UserName
}
}
Mutation
GraphQL でデータを作成、更新および削除する際に使用する。Query と同様にフィールドに引数を渡すことが可能。
mutation {
createUser(data: { name: "John", email: "[email protected]" }) {
id
name
email
}
}
Subscription
WIP
Apollo
WIP
Next Action
概要をざっくり知ることができたので、引き継きインプットをしながら何か動くものを作りつつ理解をふかめていきたい。直近は以下のことを演る予定なので、またアップデートがあれば本サイトに記事を書こうと思う。
- Udemy を見る
- 書籍を読む
- Apollo を使って GraphQL サーバを作る
参考にしたサイトや資料、ドキュメントなど
![Apollo ServerとPrismaではじめるGraphQL API開発入門](https://res.cloudinary.com/zenn/image/upload/s--2BFbdGWQ--/g_center%2Ch_280%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYm9va19jb3Zlci80ZmZmNDlhOGExLmpwZw==%2Cw_200/v1627283836/default/og-base-book_yz4z02.jpg)
![【GraphQL】入門編 ~基礎とQuery / Mutationの書き方~ | Offers Tech Blog](https://res.cloudinary.com/zenn/image/upload/s--KCBiK0wz--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%25E3%2580%2590GraphQL%25E3%2580%2591%25E5%2585%25A5%25E9%2596%2580%25E7%25B7%25A8%2520%7E%25E5%259F%25BA%25E7%25A4%258E%25E3%2581%25A8Query%2520%252F%2520Mutation%25E3%2581%25AE%25E6%259B%25B8%25E3%2581%258D%25E6%2596%25B9%7E%2520%2520%257C%2520Offers%2520Tech%2520Blog%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_34:Kazuya%2Cx_220%2Cy_108/bo_3px_solid_rgb:d6e3ed%2Cg_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzY4M2UwNWE5MjAuanBlZw==%2Cr_20%2Cw_90%2Cx_92%2Cy_102/co_rgb:6e7b85%2Cg_south_west%2Cl_text:notosansjp-medium.otf_30:Offers%2520Tech%2520Blog%2Cx_220%2Cy_160/bo_4px_solid_white%2Cg_south_west%2Ch_50%2Cl_fetch:aHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2pOQkxNQmx1ZU96T0wtQmw1MzAwTGVKblRfamlXOFF2TUVVeHNGOXc9czk2LWM=%2Cr_max%2Cw_50%2Cx_139%2Cy_84/v1627283836/default/og-base-w1200-v2.png)