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
410
Kotlin 最新動向2022 #tfcon #techfeed
ntaro
1
2.2k
#Ubie 狂気の認知施策と選考設計
ntaro
13
13k
UbieにおけるサーバサイドKotlin活用事例
ntaro
1
1.1k
KotlinでSpring 完全理解ガイド #jsug
ntaro
6
3.3k
Kotlinでサーバサイドを始めよう!
ntaro
1
930
Androidからサーバーサイドまで!プログラミング言語 Kotlinの魅力 #devboost
ntaro
5
2.6k
Kotlin Contracts #m3kt
ntaro
4
3.8k
How_to_Test_Server-side_Kotlin.pdf
ntaro
1
440
Other Decks in Programming
See All in Programming
MCP with Cloudflare Workers
yusukebe
1
100
たのしいparse.y
ydah
3
120
急成長期の品質とスピードを両立するフロントエンド技術基盤
soarteclab
0
820
DevFest Tokyo 2025 - Flutter のアプリアーキテクチャ現在地点
wasabeef
4
660
暇に任せてProxmoxコンソール 作ってみました
karugamo
1
510
気をつけたい!Desktop対応で陥りやすい罠とその対策
goto_tsl
0
200
Serverless苦闘史
mosh_inc
0
150
Symfony Mapper Component
soyuka
2
630
我々のデザインシステムは Chakra v3 にアップデートします
shunya078
2
3k
開発者とQAの越境で自動テストが増える開発プロセスを実現する
92thunder
0
110
似たもの同士のPerlとPHP
uzulla
1
110
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
1
720
Featured
See All Featured
Speed Design
sergeychernyshev
25
650
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Bash Introduction
62gerente
608
210k
Become a Pro
speakerdeck
PRO
25
5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Into the Great Unknown - MozCon
thekraken
33
1.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Fireside Chat
paigeccino
34
3.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
BBQ
matthewcrist
85
9.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
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、すごいけど使い道わからない • コード生成できるし言うことなしでは