Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GraphQL 入門
Search
SAW
April 06, 2024
Programming
1
130
GraphQL 入門
GENKI.dev なんでもLT会 vol3 の発表資料です。
SAW
April 06, 2024
Tweet
Share
More Decks by SAW
See All by SAW
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
51
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
180
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
99
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
280
OSS contributor への第一歩を踏み出すまでの物語
azuki
2
220
Eloquent で relation を扱う基礎
azuki
0
120
メイキング・オブ・PHPカンファレンス 〜PHPカンファレンス関西2024の運営スタッフが語る舞台裏〜
azuki
0
89
ブラウザでテキストを読み上げる
azuki
0
140
計画性ないけれどノリと勢いだけで地方でも勉強会を開くすゝめ 〜 PHPカンファレンス関西2024 の懇親会 LT のその後 〜
azuki
0
73
Other Decks in Programming
See All in Programming
ecspresso, ecschedule, lambroll を PipeCDプラグインとして動かしてみた (プロトタイプ) / Running ecspresso, ecschedule, and lambroll as PipeCD Plugins (prototype)
tkikuc
2
1.8k
ESLintプラグインを使用してCDKのセオリーを適用する
yamanashi_ren01
2
230
令和7年版 あなたが使ってよいフロントエンド機能とは
mugi_uno
10
5.1k
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
290
BEエンジニアがFEの業務をできるようになるまでにやったこと
yoshida_ryushin
0
190
為你自己學 Python
eddie
0
520
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
1k
技術的負債と向き合うカイゼン活動を1年続けて分かった "持続可能" なプロダクト開発
yuichiro_serita
0
300
PHPとAPI Platformで作る本格的なWeb APIアプリケーション(入門編) / phpcon 2024 Intro to API Platform
ttskch
0
390
週次リリースを実現するための グローバルアプリ開発
tera_ny
1
1.2k
PHPUnitしか使ってこなかった 一般PHPerがPestに乗り換えた実録
mashirou1234
0
420
良いユニットテストを書こう
mototakatsu
11
3.6k
Featured
See All Featured
Building Adaptive Systems
keathley
38
2.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
19
2.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Scaling GitHub
holman
459
140k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
3
360
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
The Language of Interfaces
destraynor
155
24k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Transcript
GraphQL ⼊⾨ なんでもLT会 vol 3 2 02 4 / 0
4 / 0 6 SAW
$(whoami) • ⽒名: 加藤 宗⼀郎 (29歳) • ハンドルネーム: SAW •
関⻄の IT エンジニア コミュニティの賑やかし担当 (⾃称) • ⼤阪在住‧愛知出⾝ • X (旧 Twitter): @azuki_eater • 得意分野: Web アプリケーション開発 • Vue, Laravel 2
GraphQL とは • API のための問い合わせ⾔語 • GraphQL ではクエリで必要なデータをクライアントが指定 • サーバーはクエリに基づいて必要なデータを返却
• さまざまなプログラミング⾔語でのサーバー実装ライブラリが存在 3
GraphQL の特徴 • 必要なデータを 1 つのクエリで過不⾜なく柔軟に取得可能 • REST では API
のエンドポイントが返すデータ構造は⼀定 • GraphQL のエンドポイントは 1 つ • REST API では必要に応じてエンドポイントを新たに作成する必要がある • GraphQL はスキーマファースト • 各フィールドのデータ型を定義できクエリの型検証も可能 4
GraphQL を利⽤した API 通信の流れ 1 . クライアントがクエリを送信する 2 . サーバーは要求されるフィールドのデータを取得する処理を実⾏する
3 . 取得したデータをクライアントに返却する 5 クライアント サーバー query loginUser { user { me } } { "data": { "user": { "me": "SAW" } } } 1 . クエリを送信 2 . 要求されるフィールドの データを取得 3 . データを JSON で返却
GraphQL におけるデータ操作 • GraphQL におけるデータ操作の分類は以下の 3 つ • Query: データの読み込み操作
• CRUD の R (Read) を担当 • Mutation: データの書き込み操作 • CRUD の C (Create), U (Update), D (Delete) を担当 • Subscription: サーバーの更新をリアルタイムに取得 • サーバーのデータが変更されると subscribe しているクライアントに通知 6
GraphQL のクエリの基本的な記述⽅法 • データ操作 (query, mutation, subscription) の種類を記載 • データ操作の種類は省略可能
(フィールドを囲む波括弧は省略不可) • 取得対象のフィールドを指定 • フィールドがオブジェクトの場合はそのオブジェクトのプロパティを⼊れ⼦で指定 • フィールドが引数を受け取る場合は指定可能 7
GraphQL のクエリ例 • Countries GraphQL API を使った例 8 query Countries
{ countries { code name emoji languages { code name } } } 国の名前‧絵⽂字‧⾔語を取得 query Country { country(code: "JP") { code capital currency emoji name } } コードが JP の国の情報を取得 オブジェクトが⼊れ⼦の場合は ⼦オブジェクトのフィールドも指定 引数を指定
スキーマの定義 • API でどのような操作やフィールドが利⽤可能かを定義 • GraphQL におけるスキーマ定義⾔語によって定義 • サーバー側でスキーマを定義 •
それぞれのフィールドの型についても定義 9
GraphQL の型 • GraphQL にはスカラー型とオブジェクト型の 2 種類が存在 • スカラー型: GraphQL
で定義済みの型 • 定義済みの型: Int, Float, String, Boolean, ID • オブジェクト型: 複数のフィールドで構成される型 • non-nullable の指定はエクスクラメーションマーク (!) を記述 10
リストの表現⽅法 • GraphQL ではリストを⾓括弧 ([]) で表現 • リストの中⾝とリスト⾃⾝が nullable かどうかの指定が可能
11 リストの型宣⾔ 定義 [Int] リスト: nullable 中⾝: nullable な Int [Int!] リスト: nullable 中⾝: non-nullable な Int [Int]! リスト: non-nullable 中⾝: nullable な Int [Int!]! リスト: non-nullable 中⾝: non-nullable な Int
オブジェクト同⼠のリレーション • フィールドにオブジェクト型を指定することでリレーションを表現 • ⼀対⼀: フィールドにオブジェクト型を指定 • ⼀対多: フィールドにオブジェクトのリストを指定 •
多対多: 双⽅向に⼀対多のフィールドを定義 12
リレーションの定義例 • Countries GraphQL API を模倣して型定義する例 13 type Language {
code: ID! name: String! } type Country { code: ID! name: String! emoji: String! languages: [Language!]! } ⼀対多の例 type Language { code: ID! name: String! } type Country { code: ID! name: String! emoji: String! language: Language! } ⼀対⼀の例 type Language { code: ID! name: String! countries: [Country!]! } type Country { code: ID! name: String! emoji: String! languages: [Language!]! } 多対多の例 ※ 上記の例の場合は「⼀対多」が⾃然な定義
総括 • GraphQL の概要を説明 • GraphQL のデータ操作について説明 • Query, Mutation,
Subscription の役割 • GraphQL のクエリの基本的な書き⽅について説明 • GraphQL のスキーマ定義について説明 • スカラー型とオブジェクト型 • リレーションの実現⽅法 14
ご清聴ありがとうございました