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.2k
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
730
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
990
Androidからサーバーサイドまで!プログラミング言語 Kotlinの魅力 #devboost
ntaro
5
2.8k
Kotlin Contracts #m3kt
ntaro
4
4.1k
How_to_Test_Server-side_Kotlin.pdf
ntaro
1
510
Other Decks in Programming
See All in Programming
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
Claude Code と OpenAI o3 で メタデータ情報を作る
laket
0
110
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
160
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
340
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
1k
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
250
実践 Dev Containers × Claude Code
touyu
1
160
iOS開発スターターキットの作り方
akidon0000
0
240
QA x AIエコシステム段階構築作戦
osu
0
250
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
38
11k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
720
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
180
Featured
See All Featured
Writing Fast Ruby
sferik
628
62k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Making Projects Easy
brettharned
117
6.3k
How GitHub (no longer) Works
holman
314
140k
4 Signs Your Business is Dying
shpigford
184
22k
The Invisible Side of Design
smashingmag
301
51k
How to Ace a Technical Interview
jacobian
278
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Become a Pro
speakerdeck
PRO
29
5.5k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Visualization
eitanlees
146
16k
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、すごいけど使い道わからない • コード生成できるし言うことなしでは