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
s-ichikawa
January 26, 2019
Programming
3
1.1k
GraphQL入門
s-ichikawa
January 26, 2019
Tweet
Share
More Decks by s-ichikawa
See All by s-ichikawa
15分で分かった気になるGraphQL
ichikawa
3
3.1k
ReactPHPとの戯れ
ichikawa
0
500
商品監視を支える技術.key.pdf
ichikawa
0
86
SendGridで人生変わった
ichikawa
2
2.2k
Laravel with SendGrid
ichikawa
0
2.8k
Other Decks in Programming
See All in Programming
Contemporary Test Cases
maaretp
0
130
Content Security Policy入門 セキュリティ設定と 違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting
uskey512
1
520
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
600
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
110
Macとオーディオ再生 2024/11/02
yusukeito
0
370
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
250
CSC509 Lecture 12
javiergs
PRO
0
160
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
CSC509 Lecture 09
javiergs
PRO
0
140
as(型アサーション)を書く前にできること
marokanatani
9
2.6k
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.4k
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
190
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
65
11k
Six Lessons from altMBA
skipperchong
27
3.5k
Building Applications with DynamoDB
mza
90
6.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Designing Experiences People Love
moore
138
23k
Adopting Sorbet at Scale
ufuk
73
9.1k
BBQ
matthewcrist
85
9.3k
Speed Design
sergeychernyshev
24
610
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Transcript
GraphQL入門 PHP Conference Sendai 2019
Profile Twitter: @ichikawa_0829 株式会社メルカリ Backendエンジニア
仙台 お問い合わせ対応 商品監視 etc... 福岡 電話対応 etc... 東京 プロダクトチーム コーポレート
etc... メルカリと仙台
今日話すこと - GraphQLとは? - Schema と Query - GraphQLは銀の弾丸? -
Library, Tool & Services - GraphQLの初め方
GraphQLとは?
Restful APIの問題を解決するために作られた APIの為のクエリ言語
Restful APIの問題を解決するために作られた APIの為のクエリ言語
SimpleなWeb Service Browser Server html
SPA + Restful API Browser User News Transaction Todo
SPA + Restful API Browser User News Transaction Todo
SPA + Restful API Browser User News Transaction Todo
Multi Client + Restful API Browser User iOS Android News
Transaction Todo
Restful APIの問題 エンドポイントにまつわる問題 - Round Tripが増える - 対応漏れが発生しやすくなる(セキュリティ系とか) Responseがどのようなデータ構造をしているのか予測が付きづらい -
https://example.com/user/123 をGETしたときに返されるResponseはどんな データ構造をもっているか分からない Over Fetching - レスポンスの中に使わないデータが含まれている状態 Under Fetching - レスポンス中に必要なデータが含まれていない状態
GraphQL Browser User iOS Android News Transaction Todo
GraphQLはどう課題解決するか - エンドポイントが増えすぎて管理が煩雑に - 単一エンドポイント - Round Tripが多い - Over
Fetching, Under Fetching - 1つのクエリで複数のリソースを取得できるため、 1回の Round Tripで必要な情報が過不足なく取得可能 - RequestとResponseのデータ構造の乖離 - GraphQLではQueryとResponseの構造が酷似しているの で理解しやすい
GraphQLの強み - Schemaによる恩恵 - Schema first development - Documentなども自動生成がしやすい -
IDEなどで補助機能が使える - 開発補助ツール等が豊富 - 学習コストが低い - QueryもSchemaも覚えることはそんなに多くない
History
History of GraphQL 2012.xx Facebookで開発が始まる 2015.9 React.js Confでtechnical previewとして公開 2016.9
technical previewをやめて正式に公開 同タイミングでGitHubのAPI v4がGraphQL APIとして公開 2018.11 GraphQL PJの運営がFacebookからGraphQL Foundationへ
GraphQL Foundation 幅広い分野の企業がGraphQLプロジェクトの推進のために設立したオープンソース・ ファウンデーション 中立的なGraphQLエコシステムの成長・維持に取り組んでいく ※elementlのロゴ見つからなかった
Spec - 誰でも見れる形で公開されている - 2018/7公開された仕様が最新版 https://facebook.github.io/graphql/
Workflow
query GetUser { user(id: "U12345abcde") { id name } }
{ "data": { "user": { "id": "U12345abcde", "name": "s-ichikawa" } } } type User { id: ID! name: String! } type Query { user(id: String): User } Schema Query Response GraphQL POST https://example.com/query
query GetUser { user(id: "U12345abcde") { id name items (first:
2) { id name price } } } "data": { "user": { "id": "U12345abcde", "name": "s-ichikawa", "items": [ { "id": "I8674665223082153551", "name": "ほうじ茶", "price": 500 }, { "id": "I6129484611666145821", "name": "烏龍茶", "price": 500 } ] } } } Response
query GetUser { items { id name price } user(id:
"U12345abcde") { id name } } { "errors": [ { "message": "failed to access db", "path": [ "items" ] } ], "data": { "items": null, "user": { "id": "U12345abcde", "name": "s-ichikawa" } } } Error Response
開発の流れ Schema Design Implements Monitoring Schema Client API Product Workflow
Output
Client実装の流れ 1. Schema設計する 2. 作られたSchemaを元にクライアントで必要なデータを取得したりデータの更新をお こなったりするためQueryを作る 3. Queryを呼び出す処理を書く 4. Responseを使ってクライアントのViewを更新する処理を書く
Backend実装の流れ 1. Schema設計する 2. 追加・変更されたSchema毎にResolverを書く Resolver? - Queryで要求されたType(型)を解決するもの。 - DBや外部APIをコールするなどしてデータを用意して型を解決して返す
- Resolverは定義した型毎に作る、この集合がサーバ実装となる - 作り方は使うLibraryに寄る
1. Schema作る 2. 開発する a. Client側はQuery書く b. Server側はAPI作る 要は…
1. Schema作る 2. 開発する a. Client側はQuery書く b. Server側はAPI作る 要は…
Schema
Object Type - type キーワードを使用して宣言 - { }内にFieldを記載していく - Fieldは
名前: 型名という形で宣言 - Object TypeかScalar Type、 enumが指定可能 - ! はNon Nullable指定 - [ ] はArray - 型やFieldには “(double quote) で ドキュメントが書ける “”” Our Service User “”” type User { id: ID! name: String! follower: [User!] }
Scalar Type - 基本となるScalarはたったの5種類 - Int - Float - String
- Boolean - ID - 必要に応じてCustom Scalarも作 れる “”” Default Scalarは宣言する必要なし “”” scalar Timestamp type Item { id: ID! name: String! createdAt: Timestamp! updatedAt: TimeStamp! }
Enum - ステータスやカテゴリなどの定数を 宣言できる - enumキーワードを使用して表現す る - ScalarやObject Typeと同様に
フィールドの型として設定すること ができる enum ItemStatus { DRAFT ON_SALE TRADING SOLD CANCEL } type Item { id: ID! name: String! status: ItemStatus! }
ArrayにおけるNullableの表現 配列内の値がNull 配列自体がNull [User] OK OK [User!] NG OK [User]!
OK NG [User!]! NG NG
Operation Type - GraphQL APIとしてリクエスト可能な オペレーションについて宣言する - 宣言できるオペレーションは3種 - query
- mutation - subscription schema { query: Query mutation: Mutation } type Query { users: [User!] } type Mutation { registoration(name: String!): User }
Input Type - Query呼び出し時に複雑なデータを 渡したい場合にそれを型として宣言 しておくことができる - 通常のtypeとほぼ同様だがこちらは inputキーワードを使う -
入力値が多い場合などに使うと Schemaの見通しが良くなる - 返り値として設定することはできない mutation { register(name: String!, email: String!, gender: Gender, address: String!): User } ↓ input RegisterInput { name: String! email: String! gender: Gender address: String! } mutation { register(input: RegisterInput): User }
Interface - 指定した型に、特定のフィールドを 持つことを約束させる為に使用す る interface Transaction { id: ID!
item: Item! } type SellingTransction implements Transaction { id: ID! item: Item! } type CancelTransaction implements Transaction { id: ID! item: Item! reason: String } query { transactions: [Transaction] }
Union - 異なる複数の型の内のいずれかの 型 - 全く異なるフィールドを持つ型を1つ の型として表現したい場合に使用 する type News
{ title: String! content: String! } type Todo { title: String! description: String } type Message { subject: String! body: String } union Notification = News | Todo | Message
Query
GraphQLのクエリ言語 - GraphQL APIを通してデータの取得や登録・更新を行う為の言語 - Operationは大きく別けて3種類がある(ルートOperation型) - Query - Mutation
- Subscription - 複数のOperationを1度にリクエストすることは出来ない
Query - データを参照するために使用される - queryキーワードを使用して宣言する - 複数のデータを関係性あるなしに関わらず一括で指定することが可能
query GetUser { user(id: "U12345abcde") { id name follower {
name } } } { "data": { "user": { "id": "U12345abcde", "name": "ichikawa", "follower": [ {“friend01”}, {“friend02”}, ], } } } type User { id: ID! name: String! follower: [User] } type Query { user(id: String): User } Schema http://example.com/query
Query - Programmaticに書くための書式も用意されている - Fragment: 複数のフィールド定義を使いまわしたい場合に効果的 - Alias: 別名をつけることも可能
query { user { id name email follower { id
name email } } } query { user { ...userInfo follower { ...userInfo } } } flagment userInfo on User { user_id: id name email }
Mutation - 更新系のデータ操作を行うために使用される - SQLで言うところのInsert、Update、Delete辺り - 構文はQueryとほとんど同じ
mutation Registration { registration (name: "s-ichikawa") { id name }
} { "data": { "user": { "id": "U12345abcde", "name": "s-ichikawa" } } } type User { id: ID! name: String! } type Mutation { registration(name: String): User } http://example.com/query
Subscription - リアルタイムにデータ参照を行うために使用される - 参照するデータに更新が行われるとWebSocket等を通してクライアントに変更内 容が通知される - GraphQLライブラリが対応していない場合もある
Introspection - APIのスキーマ情報を取得するために使用される - 開発ツールなどでオートコンプリートやドキュメント表示を行うためにも使われる。
query { __type(name: "User") { name fields { name }
} } { "data": { "__type": { "name": "User", "fields": [ { "name": "id" }, { "name": "name" } ] } } } type User { id: ID! name: String! } http://example.com/query
Directive - SchemaやQueryに対して付加情 報を与える事ができる - GraphQLの仕様として組み込まれ ているのは - Schemaで使える :@deprecated
- Queryで使える:@skip, @include - ライブラリが対応していれば独自の Directiveも作れる “”” in Schema “”” type User { id: ID! name: String! sex: Sex @deprecated } # in Query query myQuery($someTest: Boolean) { experimentalField @skip(if: $someTest) }
GraphQLは 銀の弾丸か?
GraphQLが抱える課題 - N+1問題 - 情報をまとめて遅延取得する方法などを使わないと容易に N+1問題が発生する - ファイルアップロード - 別途RESTエンドポイント作るという手法が今の所よく聞く
- モニタリング - 単一エンドポイントかつ基本的に 200が返るためRestful APIの時とはモニタリングの仕方が全く異 なる - Cache - 単一エンドポイントかつ基本的に POSTを使用するためCDNでCacheするのがちょっと面倒 (できなくはない) GraphQLは銀の弾丸ではない。 Restfulの方がやりやすい時はRestfulを使いましょう。
Architecture Design Pattern
Single server + Database
Service1 Service3 Gateway gRPC http Service2 http
Service1 Hybrid Service2 gRPC http
Library, Tools & Services
Server Libraries - JavaScript - GraphQL.js - express-graphql - Apollo-Server
- PHP - graphql-php FWに依存しない形で使うならこれ - Lighthouse Laravelを使っているならこれが活発で良さげ - Java, Go, Ruby, Python, Elixir, Erlang, etc...
Client Libraries - JavaScript - Apollo-Client - Relay - Swift
/ Objective-C (iOS) - Apollo iOS - GraphQL iOS - Java (Android) - Apollo Android - Nodes - C#, Go, python
GraphQL IDE - In-browser - GraphiQL https://github.com/skevy/graphiql-app - GraphQL Playground
https://github.com/prisma/graphql-playground - Software - Insomnia https://insomnia.rest/graphql/ - Altair GraphQL Client https://github.com/imolorhe/altair
Apollo Platform - GraphQLを使用するための 様々なツールやライブラリ、 サービスなどを統合的に提供 している - Node.jsの技術選択が可能で 予算が許されるなら乗っかっ
ておくと何かと便利になると思 います
その他 - IDE Plugin - for IntelliJ https://github.com/jimkyndemeyer/js-graphql-intellij-plugin - for
VSCode https://marketplace.visualstudio.com/items?itemName=Prisma.vscode-graphql - Schema関連 - graphdoc https://github.com/2fd/graphdoc - graphql-doctor https://github.com/cap-collectif/graphql-doctor - Test - graphql-faker https://github.com/APIs-guru/graphql-faker
GraphQLの 始め方
まずは触ってみる - 既にあるGraphQL APIを触ってみる - GitHub API v4 - SW
API - ここから色々探せます http://apis.guru/graphql-apis/ - 作ってみる - 簡単なサンプル - 既存APIをの一部をGraphQLに置き換えてみる
Learning GraphQL - 今の所日本語のGraphQL専門の書籍はない - 英語であればいくつかあるが、個人的にはこ れがおすすめ - Kindle版もあるのですぐ読めます
役立つリンク - Introduction to GraphQL https://graphql.org/learn/ - 「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ
https://employment.en-japan.com/engineerhub/entry/2018/12/26/103000#GraphQL%E3%81%A8% E3%81%AF%E4%BD%95%E3%81%8B
Conclusion
Conclusion - GraphQLの仕様はそんなに多くない - 便利なツール類も既に多い - 採用実績はどんどん増えてる - ライブラリに使いたい機能が実装されているかは要確認!
Thank You! Enjoy GraphQL!