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
530
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
950
Androidからサーバーサイドまで!プログラミング言語 Kotlinの魅力 #devboost
ntaro
5
2.6k
Kotlin Contracts #m3kt
ntaro
4
3.9k
How_to_Test_Server-side_Kotlin.pdf
ntaro
1
470
Other Decks in Programming
See All in Programming
color-scheme: light dark; を完全に理解する
uhyo
6
460
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
53
18k
時計仕掛けのCompose
mkeeda
1
310
ARA Ansible for the teams
kksat
0
160
Writing documentation can be fun with plugin system
okuramasafumi
0
120
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
130
GAEログのコスト削減
mot_techtalk
0
120
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
150
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
190
バッチを作らなきゃとなったときに考えること
irof
0
410
SpringBoot3.4の構造化ログ #kanjava
irof
3
1k
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
180
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Building Adaptive Systems
keathley
40
2.4k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Designing for humans not robots
tammielis
250
25k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
Agile that works and the tools we love
rasmusluckow
328
21k
Statistics for Hackers
jakevdp
797
220k
A better future with KSS
kneath
238
17k
Building Your Own Lightsaber
phodgson
104
6.2k
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、すごいけど使い道わからない • コード生成できるし言うことなしでは