GraphQL超入門（座学）.pdf

Tech Dojo
いまからでも遅くない！
GraphQL(StepZen)超入門
IBM Developer
2023/11/30
18時開始予定です。
マイクをオフにして
お待ちください

2
Customer Success, IBM Technology, Japan / © 2023 IBM Corporation
自己紹介
Mayumi.Sakurai@ibm.com
Property Value
氏名櫻井檀（さくらいまゆみ）
出身浙江省
（2023杭州アジア大会開催のところ）
日本歴 2009年〜
所属チーム CSM Automation
HashTag #ITほぼゼロから

3
免責事項
本資料に含まれる情報は可能な限り正確を期しておりますが、
記載された内容に関して、日本アイ・ビー・エム株式会社が
何ら保証するものではありません。
従って、本資料の情報の利用は使用者の責任において
為されるものであり、資料の内容によって受けた
如何なる被害に関しても一切の補償をするものではありません。

4
GraphQLの基本的な
概念がわかる
本Dojoのゴール

5
本日のアジェンダ（座学）
1. GraphQLとは
2. REST APIの課題について
3. GraphQLでできること
4. GraphQLの基本概念
5. ここまでのまとめ

6
本日のアジェンダ（デモ）
1. REST APIとデータベースを取り込んでみる
• REST API
• MySQL
2. クエリーを実行してデータ取得

7
1. GraphQLとは

8
GraphQLとは（アンケート）
皆さんはGraphQLをどれくらい知っていますか？
1. 全然知らない
2. 聞いたことはある
3.基本的な用語を知っている
4.少し使ったことがある
5.がっつり何か作ったことがある

9
GraphQLとは
API向けクエリ言語

10
GraphQLとは
• Facebook(Meta)で開発
• REST APIのデメリットを補うもの
• 2012年モバイルAPP向けに開発
• 2015年オープンソース化
• 2023年 IBM、StepZen社買収
https://graphql.org/brand/

11
GraphQLとは（StepZenのご紹介）
API/データ提供者が素早くローコードで
GraphQL APIを構築・提供できるマネージド・サービス
①GraphQL API をより迅速に
より少ないコードで構築する
②IBM StepZen Graph Server に
面倒な作業を任せる
③エンタープライズレベルの
セキュリティ

12
GraphQLとは
• Facebook(Meta)で開発
• REST APIのデメリットを補うもの
• 2012年モバイルAPP向けに開発
• 2015年オープンソース化
• 2023年 IBM、StepZen社買収
https://graphql.org/brand/

13
1. GraphQLとは

14
REST APIの課題について
• オーバーフェッチ（不要なデータ取得）
例：名前と年齢の情報を知りたい
/user/1
[ユーザー情報]
name: Aさん
age: 25
email: aaaaa@.com
createdAt: 2023-08-27 不要なデータ
⇨通信やサーバーサイド側での負荷の増加

15
• アンダーフェッチ（複数リクエスト必要)
name: Aさん
age: 25
email: aaaaa@.com
createdAt: 2023-08-27
[投稿情報]
title: Aさんの投稿
content: GraphQLは
オーバーフェッチとア
ンダーフェッチを解決
できます。
①/user/1 ②/post/1
⇨画面表示までに時間がかかる上に、通信の負荷も上昇
例：[ユーザー情報]と[投稿情報]を表示させたい

16
ユースケースごとにエンドポイントを作成すれば解決？！
GraphQL
オーバーフェッチ・アンダーフェッチ解決例
エンドポイントが増えすぎて管理が難しくなる…

17
1. GraphQLとは

18
• 必要なデータだけを取得
例：名前と年齢の情報を知りたい
name: Aさん
age: 25
⇨REST APIと比べて、通信やサーバーサイド側での負荷が低い
GraphQLで何ができるのか
名前と年齢の情報

19
• 関連する情報も一つのリクエストで取得
name: Aさん
age: 25
[投稿情報]
title: Aさんの投稿
content: GraphQLはオーバーフェッチ
とアンダーフェッチを解決できます。
⇨ REST APIと比べて、通信の負荷が低い
例：[ユーザー情報]と[投稿情報]を表示させたい
・[ユーザー情報]の名前と年齢
・[投稿情報]の全内容

20
DB
クラウド
Webアプリ
AI
Request /aaa
/bbb
/ccc
⇨ユースケースが増えればエンドポイントも増える
• REST APIの通信例

21
DB
クラウド
Webアプリ
AI
・ Query
・ Mutation
GraphQL
• GraphQLの通信例
⇨エンドポイントの管理が楽に

22
GraphQLで何ができるのか(まとめ）
•必要なデータだけを取得
•関連する情報も一つのリクエストで取得
•エンドポイントの管理が楽

23
1. GraphQLとは

24
GraphQLの基本概念
DB
クラウド
AI
GraphQLにおける定義
リクエスト
スキーマリゾルバ
多様なデータソース
クエリ

25
クエリ
・Query
データ取得系
・Mutation
データ更新系
・Subscription
リアルタイムにデータ
の更新情報を受ける
※参考
・GraphQLのクエリ（広義）
⇨ データを取得するための全てのリクエストの
こと
・操作としてのクエリ（狭義）
⇨読み取り専用でデータを取得する操作のこと

26
Query
{
Person{
name
}
}
Queryによるデータ取得
{
"Person": [
{ “name”: ”Aさん" },
{ “name”: ”Bさん" },
{ “name”: ”Cさん" }
]
}
レスポンス
このQueryは、現在データベースに保存されているすべての人物のリストを返す

27
Query
{
Person{
name
age
}
}
Queryによるデータ取得
{
"Person": [
{ “name”: ”Aさん", "age": 40 },
{ "name": ”Bさん", "age": 23 },
{ “name”: ”Cさん", "age": 34 }
]
}
レスポンス
このQueryは、現在データベースに保存されているすべての人物と年齢のリストを返す

28
スキーマ
type Person {
name: String!
age: Int!
}
Schema例
・Type(型）
⇨データの種類や構造を定義
・Field（フィールド）
⇨型の中の個々の情報のこと
データの構造を定義のみ、実際のデータ操作は行わない
Type
Field

29
スキーマ
type Person {
name: String!
age: Int!
}
Schema例
・Stringのデータ型
⇨文字列
・Intのデータ型
⇨数字
スカラー
（データ型）
データの構造を定義のみ、実際のデータ操作は行わない

30
リゾルバ
GraphQLのクエリに対する処理方法を定義
StepZenではディレクティブを用いてリゾルバの動作を指定
→@restディレクティブを使ってREST APIからデータを取得

31
1. GraphQLとは

32
ここまでのまとめ（再掲）
DB
クラウド
AI
GraphQLにおける定義
リクエスト
スキーマリゾルバ
多様なデータソース
クエリ

33
本日のアジェンダ（デモ）
1. REST APIとデータソースを取り込んでみる
• REST API
• MySQL
2. クエリーを実行してデータ取得

34
多様なデータソースを
取り込んでみよう
デモ①

デモ①： REST API 、MySQLでGraphQL API構築
①データソースの選択 ②スキーマ自動生成 ③構築したGraphQL APIを確認

36
クエリーを実行して
必要なデータのみ取得
デモ②

デモ②：必要なデータのみをリクエスト→結果を返す
①id
②image
③title
キャラクター
毎に
①②③の情報を
ほしい！
結果を
出力できる！
必要な結果のみ
出力できる！
商品リストの
①②③の情報を
ほしい！

38
GraphQLの基本的な
概念がわかる
まとめ

39
まとめ
1. GraphQLとは
4. デモ
5. まとめ
こんなサイトも参考に・・・
▼GraphQL（StepZen）IBM公式ドキュメント
https://www.ibm.com/products/stepzen
▼StenZen社提供サンプルソース
https://github.com/stepzen-dev/examples
▼デモで使用したStepZenサイト
https://stepzen.com/

40
補足：StepZen名称変更
以下の通り名称変更されました
（変更前）IBM StepZen Graph Server
（変更後）IBM API Connect® Essentials as a Service (SaaS)
https://www.ibm.com/docs/ja/announcements/cloud-pak-integration-202341-mq-934-deliver-new-integration-
capabilities-stepzen-graph-server-is-renamed

41
いろいろTry&Errorしながら
試してみてください。
ありがとうございました

42

GraphQL超入門（座学）.pdf

Recommended

Recommended

More Related Content

Similar to GraphQL超入門（座学）.pdf

Similar to GraphQL超入門（座学）.pdf (20)

GraphQL超入門（座学）.pdf