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
Taro Nagasawa
January 26, 2018
Programming
5
4.1k
GraphQL入門
エムスリー Tech Talk で発表したスライドです。
Taro Nagasawa
January 26, 2018
Tweet
Share
More Decks by Taro Nagasawa
See All by Taro Nagasawa
Android開発者のための Kotlin Multiplatform入門
ntaro
0
580
Kotlin 最新動向2022 #tfcon #techfeed
ntaro
1
2.2k
#Ubie 狂気の認知施策と選考設計
ntaro
13
13k
UbieにおけるサーバサイドKotlin活用事例
ntaro
1
1.1k
KotlinでSpring 完全理解ガイド #jsug
ntaro
6
3.4k
Kotlinでサーバサイドを始めよう!
ntaro
1
960
Androidからサーバーサイドまで!プログラミング言語 Kotlinの魅力 #devboost
ntaro
5
2.7k
Kotlin Contracts #m3kt
ntaro
4
4k
How_to_Test_Server-side_Kotlin.pdf
ntaro
1
480
Other Decks in Programming
See All in Programming
マルチアカウント環境での、そこまでがんばらない RI/SP 運用設計
wa6sn
0
500
RailsでCQRS/ESをやってみたきづき
suzukimar
2
1.5k
PHPのガベージコレクションを深掘りしよう
rinchoku
0
240
php-fpm がリクエスト処理する仕組みを追う / Tracing-How-php-fpm-Handles-Requests
shin1x1
5
810
AHC 044 混合整数計画ソルバー解法
kiri8128
0
300
2025/3/18 サービスの成長で生じる幅広いパフォーマンスの問題を、 AIで手軽に解決する
shirahama_x
0
160
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.3k
remix + cloudflare workers (DO) docker上でいい感じに開発する
yoshidatomoaki
0
120
フロントエンドテストの育て方
quramy
8
2.5k
‘무차별 LGTM~👍’만 외치던 우리가 ‘고봉밥 코드 리뷰’를?
hannah0731
0
530
Devinのメモリ活用の学びを自社サービスにどう組み込むか?
itarutomy
0
1.6k
ステートソーシング型イベント駆動の視点で捉えるCQRS+ES
shinnosuke0522
1
310
Featured
See All Featured
Facilitating Awesome Meetings
lara
53
6.3k
Bash Introduction
62gerente
611
210k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
102
18k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
118
51k
Rails Girls Zürich Keynote
gr2m
94
13k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Making Projects Easy
brettharned
116
6.1k
Transcript
GraphQL 入門
長澤 太郎 • エムスリー株式会社 • 日本Kotlinユーザグループ代表
もくじ 1. GraphQLとは 2. GraphQLを始める 3. 便利なツールやサービス
1. GraphQLとは
None
GraphQL • Facebook発OSSであるクエリ言語 ◦ REST APIに代わるリソース操作方法を提供 ◦ HTTPだけでなく、gRPCやThriftの上でも動く • 必要なものだけ取得できる
• 一度のリクエストで関連するものすべてを取得できる • 型システム • API定義コードがそのままドキュメントに
スキーマとクエリ type Query { hello: String } { hello }
スキーマ クエリ { "data": { "hello": "Hello, world!" } } レスポンス
スキーマとクエリ type Query { hello: String } { hello }
スキーマ クエリ { "data": { "hello": "Hello, world!" } } レスポンス 型
スキーマとクエリ type Query { hello: String } { hello }
スキーマ クエリ { "data": { "hello": "Hello, world!" } } レスポンス クエリと結果が同じ形!
{ hello { content } } ユーザ定義型 type Message {
content: String } type Query { hello: Message } { "data": { "hello": { "content": "Hello, world!" } } }
{ hello { priority } } 列挙型 enum Priority {
HIGH, NORMAL } type Message { content: String, priority: Priority } type Query { hello: Message } { "data": {"hello": { "priority": "HIGH" } } }
{ hello { priority } } 列挙型 enum Priority {
HIGH, NORMAL } type Message { content: String, priority: Priority } type Query { hello: Message } { "data": {"hello": { "priority": "HIGH" } } } クエリと結果が同じ形! 必要なフィールドを自由に選 択できる!
関連するデータ(スキーマ) type User { name: String, messages: [Message] } enum
Priority { HIGH, NORMAL } type Message { content: String, priority: Priority user: User } type Query { hello: Message }
関連するデータ(クエリ) { hello { content, user { name } }
{ "data": { "hello": { "content": "Hello, world!", "user": { "name": "Taro" } } } }
non-null type User { name: String! messages: [Message]! } enum
Priority { HIGH, NORMAL } type Message { content: String!, priority: Priority! user: User! } type Query { hello: Message! }
コメント # ただのコメント "ドキュメント用のコメント" type Message { "内容" content: String!,
"優先度" priority: Priority! "投稿者" user: User! }
スキーマ再考とミューテーション # ユーザ定義型 type Message { id: Int! content: String!
} # クエリ type Query { getAllMessages: [Message]! getMessage(id: Int!): Message } # ミューテーション type Mutation { createMessage(content: String!): Message updateMessage(id: Int!, content: String!): Message }
ミューテーションoperation mutation { createMessage(content: "Hello, world!") { id content }
}
ミューテーションoperation mutation { createMessage(content: "Hello, world!") { id content }
} query { getAllMessages { id content } } ちなみに、クエリは指定もできるし省略もできる
データの変更を受け取る"第3のoperation" subscription { Message(filter: { mutation_in: [UPDATED, DELETED] }) {
mutation node { id content } previousValues { id content } } }
データの変更を受け取る"第3のoperation" subscription { Message(filter: { mutation_in: [UPDATED, DELETED] }) {
mutation node { id content } previousValues { id content } } } ミューテーションの種 類でフィルタ ミューテーションの種類 どういう操作があったのか 変更後の値 変更前の値
2. GraphQLを始める
好きな言語で実装しよう
Node + ExpressでGraphQL const express = require('express'); const graphqlHTTP =
require('express-graphql'); const { buildSchema } = require('graphql'); const schema = buildSchema(` type Query { hello: String! } `); const root = { hello: () => 'Hello, world!'; }; const app = express(); app.user('/graphql', graphqlHTTP({ schema: schema, rootValue: root, graphiql: true })); app.listen(4000);
Node + ExpressでGraphQL const express = require('express'); const graphqlHTTP =
require('express-graphql'); const { buildSchema } = require('graphql'); const schema = buildSchema(` type Query { hello: String! } `); const root = { hello: () => 'Hello, world!'; }; const app = express(); app.user('/graphql', graphqlHTTP({ schema: schema, rootValue: root, graphiql: true })); app.listen(4000); スキーマの定義
Node + ExpressでGraphQL const express = require('express'); const graphqlHTTP =
require('express-graphql'); const { buildSchema } = require('graphql'); const schema = buildSchema(` type Query { hello: String! } `); const root = { hello: () => 'Hello, world!'; }; const app = express(); app.user('/graphql', graphqlHTTP({ schema: schema, rootValue: root, graphiql: true })); app.listen(4000); APIの実装
起動してクエリを実行 curl http://localhost:4000/graphql\ -X POST\ -H 'Content-type: application/json'\ -d '
{ "query":"{ hello }" } ' {"data":{"hello":"Hello, world!"}}
起動してクエリを実行 curl http://localhost:4000/graphql\ -X POST\ -H 'Content-type: application/json'\ -d '
{ "query":"{ hello }" } ' {"data":{"hello":"Hello, world!"}} JSON
起動してクエリを実行 curl http://localhost:4000/graphql\ -X POST\ -H 'Content-type: application/json'\ -d '
{ "query":"{ hello }" } ' {"data":{"hello":"Hello, world!"}} GraphQL
GraphiQL const express = require('express'); const graphqlHTTP = require('express-graphql'); const
{ buildSchema } = require('graphql'); const schema = buildSchema(` type Query { hello: String! } `); const root = { hello: () => 'Hello, world!'; }; const app = express(); app.user('/graphql', graphqlHTTP({ schema: schema, rootValue: root, graphiql: true })); app.listen(4000);
GraphiQL
GraphiQLで遊んでみる • SWAPI GraphQL Wrapper http://graphql.org/swapi-graphql/ • GitHub API v4
https://developer.github.com/v4/
3. 便利な ツールやサービス
GraphCMS • いわゆるHeadless CMS: API-firstなCMS • WebHookをサポート(有償版のみ) • サインアップしてコンソールに入るとチュートリアルが
モデルを定義して
データを入力して
GraphiQLで確認する
スキーマ定義ファイルを ダウンロードできる
Graphcool • GraphQLバックエンドを提供するBaaS • GraphCMSのように使いやすいUI • GraphCMSより玄人向き • WebHookあり •
イベントをフックできる関数をJavaScriptで定義可能
モデルを定義して
データを入力して
GraphiQLで確認する
スキーマ定義ファイルを ダウンロードできる
望むなら関数を定義
こんな画面も用意されている
PostGraphQL • ポスグレに作ってある既存のDBに対して、GraphQL APIを 自動的につくってくれるツール
使い方 $ npm install -g postgraphql $ postgraphql\ -c postgres://user@host/db\
--export-schema-graphql schema.txt
使い方 $ npm install -g postgraphql $ postgraphql\ -c postgres://user@host/db\
--export-schema-graphql schema.txt DBのURL スキーマ定義 ファイルの出力
すごいよ!!!!
Apollo GraphQL • GraphQLのライブラリやらを作ってるコミュニティ
Apollo GraphQL Client for Android スキーマ定義とクエリ定義 からJavaコードを 自動生成してくれる!!
まとめ・雑感 • GraphQLはクエリ言語でAPIが便利に • シンプルながら強力な機能 • API作るときにURL考えなくてよいの助かる • ちょっとしたサービスならGraphcoolだけで自分でサーバを用 意する必要なさそう
• PostGraphQL、すごいけど使い道わからない • コード生成できるし言うことなしでは