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
240
GraphQL 入門
GENKI.dev なんでもLT会 vol3 の発表資料です。
SAW
April 06, 2024
Tweet
Share
More Decks by SAW
See All by SAW
PHP で学ぶ OAuth 入門
azuki
2
300
EditorConfig を使ってみよう
azuki
1
63
Symfony でサクッと作る REST API サーバー
azuki
1
120
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
150
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
250
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
130
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
340
OSS contributor への第一歩を踏み出すまでの物語
azuki
2
290
Eloquent で relation を扱う基礎
azuki
0
150
Other Decks in Programming
See All in Programming
CSC307 Lecture 17
javiergs
PRO
0
110
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
120
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
120
インターフェース設計のコツとツボ
togishima
2
670
ワイがおすすめする新潟の食 / 20250530phpconf-niigata-eve
kasacchiful
0
290
単体テストの始め方/作り方
toms74209200
0
360
RubyKaigiで得られる10の価値 〜Ruby話を聞くことだけが RubyKaigiじゃない〜
tomohiko9090
0
130
バリデーションライブラリ徹底比較
nayuta999999
1
580
「兵法」から見る質とスピード
ickx
0
240
Using AI Tools Around Software Development
inouehi
0
830
複数アプリケーションを育てていくための共通化戦略
irof
9
3.5k
Use Perl as Better Shell Script
karupanerura
0
680
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Designing for Performance
lara
609
69k
Done Done
chrislema
184
16k
We Have a Design System, Now What?
morganepeng
52
7.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
670
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
How to train your dragon (web standard)
notwaldorf
92
6.1k
GitHub's CSS Performance
jonrohan
1031
460k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
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
ご清聴ありがとうございました