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
84
GraphQL 入門
GENKI.dev なんでもLT会 vol3 の発表資料です。
SAW
April 06, 2024
Tweet
Share
More Decks by SAW
See All by SAW
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
220
OSS contributor への第一歩を踏み出すまでの物語
azuki
1
140
Eloquent で relation を扱う基礎
azuki
0
65
メイキング・オブ・PHPカンファレンス 〜PHPカンファレンス関西2024の運営スタッフが語る舞台裏〜
azuki
0
55
ブラウザでテキストを読み上げる
azuki
0
91
計画性ないけれどノリと勢いだけで地方でも勉強会を開くすゝめ 〜 PHPカンファレンス関西2024 の懇親会 LT のその後 〜
azuki
0
47
JavaScript で音声認識を試してみよう
azuki
0
110
Voice Recognition in JavaScript
azuki
0
44
Nuxt で GraphQL のクエリを送信する方法
azuki
2
150
Other Decks in Programming
See All in Programming
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
9
2.3k
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
280
Our Websites Need a Lifestyle Change, Not a Diet
ryantownsend
0
130
What you can do with Ruby on WebAssembly
kateinoigakukun
0
160
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
120
GraphQL あるいは React における自律的なデータ取得について
quramy
11
2.8k
Architecture Decision Record (ADR)
nearme_tech
PRO
1
670
Regular Expressions, REXML, Automata Learning
makenowjust
0
210
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
240
LangChainの現在とv0.3にむけて
os1ma
4
840
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
320
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
The Cult of Friendly URLs
andyhume
76
6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
What the flash - Photography Introduction
edds
67
11k
In The Pink: A Labor of Love
frogandcode
139
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
Docker and Python
trallard
39
3k
Web development in the modern age
philhawksworth
204
10k
The Invisible Side of Design
smashingmag
295
50k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
227
52k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Clear Off the Table
cherdarchuk
91
320k
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
ご清聴ありがとうございました