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
51
GraphQL 入門
GENKI.dev なんでもLT会 vol3 の発表資料です。
SAW
April 06, 2024
Tweet
Share
More Decks by SAW
See All by SAW
ブラウザでテキストを読み上げる
azuki
0
30
計画性ないけれどノリと勢いだけで地方でも勉強会を開くすゝめ 〜 PHPカンファレンス関西2024 の懇親会 LT のその後 〜
azuki
0
34
JavaScript で音声認識を試してみよう
azuki
0
33
Voice Recognition in JavaScript
azuki
0
15
Nuxt で GraphQL のクエリを送信する方法
azuki
2
86
関西の IT 勉強会コミュニティをもっと盛り上げたい!!
azuki
0
62
Postman で GraphQL のクエリを送ってみよう
azuki
0
280
Laravel でモデルの ID を UUID/ULID にする方法
azuki
0
190
Vue ユーザーが Svelte に⼊⾨してみた
azuki
1
320
Other Decks in Programming
See All in Programming
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
1k
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
200
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
480
Java 22 Overview
kishida
1
190
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
670
PostmanでAPIの動作確認が楽になった話
h455h1
0
180
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Next.js App Router
quramy
11
1.6k
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
970
Implementing Design Systems in Swift
seyfoyun
1
420
Polars入門
daikikatsuragawa
1
160
Node.js v22 で変わること
yosuke_furukawa
PRO
11
3.9k
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
457
32k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
12
1.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
222
21k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Into the Great Unknown - MozCon
thekraken
14
1k
In The Pink: A Labor of Love
frogandcode
138
21k
Code Reviewing Like a Champion
maltzj
515
39k
Raft: Consensus for Rubyists
vanstee
133
6.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
GraphQLの誤解/rethinking-graphql
sonatard
55
9.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
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
ご清聴ありがとうございました