Slide 1
Slide 1 text
GraphQL
入門
Slide 2
Slide 2 text
長澤 太郎
● エムスリー株式会社
● 日本Kotlinユーザグループ代表
Slide 3
Slide 3 text
もくじ
1. GraphQLとは
2. GraphQLを始める
3. 便利なツールやサービス
Slide 4
Slide 4 text
1. GraphQLとは
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
GraphQL
● Facebook発OSSであるクエリ言語
○ REST APIに代わるリソース操作方法を提供
○ HTTPだけでなく、gRPCやThriftの上でも動く
● 必要なものだけ取得できる
● 一度のリクエストで関連するものすべてを取得できる
● 型システム
● API定義コードがそのままドキュメントに
Slide 7
Slide 7 text
スキーマとクエリ
type Query {
hello: String
}
{
hello
}
スキーマ クエリ
{
"data": { "hello": "Hello, world!" }
}
レスポンス
Slide 8
Slide 8 text
スキーマとクエリ
type Query {
hello: String
}
{
hello
}
スキーマ クエリ
{
"data": { "hello": "Hello, world!" }
}
レスポンス
型
Slide 9
Slide 9 text
スキーマとクエリ
type Query {
hello: String
}
{
hello
}
スキーマ クエリ
{
"data": { "hello": "Hello, world!" }
}
レスポンス
クエリと結果が同じ形！
Slide 10
Slide 10 text
{
hello {
content
}
}
ユーザ定義型
type Message {
content: String
}
type Query {
hello: Message
}
{
"data": { "hello": { "content": "Hello, world!" } }
}
Slide 11
Slide 11 text
{
hello {
priority
}
}
列挙型
enum Priority {
HIGH, NORMAL
}
type Message {
content: String,
priority: Priority
}
type Query {
hello: Message
}
{
"data": {"hello": { "priority": "HIGH" } }
}
Slide 12
Slide 12 text
{
hello {
priority
}
}
列挙型
enum Priority {
HIGH, NORMAL
}
type Message {
content: String,
priority: Priority
}
type Query {
hello: Message
}
{
"data": {"hello": { "priority": "HIGH" } }
}
クエリと結果が同じ形！
必要なフィールドを自由に選
択できる！
Slide 13
Slide 13 text
関連するデータ（スキーマ）
type User {
name: String,
messages: [Message]
}
enum Priority {
HIGH, NORMAL
}
type Message {
content: String,
priority: Priority
user: User
}
type Query {
hello: Message
}
Slide 14
Slide 14 text
関連するデータ（クエリ）
{
hello {
content,
user {
name
}
}
{
"data": {
"hello": {
"content": "Hello, world!",
"user": { "name": "Taro" }
}
}
}
Slide 15
Slide 15 text
non-null
type User {
name: String!
messages: [Message]!
}
enum Priority {
HIGH, NORMAL
}
type Message {
content: String!,
priority: Priority!
user: User!
}
type Query {
hello: Message!
}
Slide 16
Slide 16 text
コメント
# ただのコメント
"ドキュメント用のコメント"
type Message {
"内容"
content: String!,
"優先度"
priority: Priority!
"投稿者"
user: User!
}
Slide 17
Slide 17 text
スキーマ再考とミューテーション
# ユーザ定義型
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
}
Slide 18
Slide 18 text
ミューテーションoperation
mutation {
createMessage(content: "Hello, world!") {
id
content
}
}
Slide 19
Slide 19 text
ミューテーションoperation
mutation {
createMessage(content: "Hello, world!") {
id
content
}
}
query {
getAllMessages {
id
content
}
}
ちなみに、クエリは指定もできるし省略もできる
Slide 20
Slide 20 text
データの変更を受け取る"第3のoperation"
subscription {
Message(filter: {
mutation_in: [UPDATED, DELETED]
}) {
mutation
node {
id
content
}
previousValues {
id
content
}
}
}
Slide 21
Slide 21 text
データの変更を受け取る"第3のoperation"
subscription {
Message(filter: {
mutation_in: [UPDATED, DELETED]
}) {
mutation
node {
id
content
}
previousValues {
id
content
}
}
}
ミューテーションの種
類でフィルタ
ミューテーションの種類
どういう操作があったのか
変更後の値
変更前の値
Slide 22
Slide 22 text
2. GraphQLを始める
Slide 23
Slide 23 text
好きな言語で実装しよう
Slide 24
Slide 24 text
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);
Slide 25
Slide 25 text
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);
スキーマの定義
Slide 26
Slide 26 text
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の実装
Slide 27
Slide 27 text
起動してクエリを実行
curl http://localhost:4000/graphql\
-X POST\
-H 'Content-type: application/json'\
-d '
{
"query":"{ hello }"
}
'
{"data":{"hello":"Hello, world!"}}
Slide 28
Slide 28 text
起動してクエリを実行
curl http://localhost:4000/graphql\
-X POST\
-H 'Content-type: application/json'\
-d '
{
"query":"{ hello }"
}
'
{"data":{"hello":"Hello, world!"}}
JSON
Slide 29
Slide 29 text
起動してクエリを実行
curl http://localhost:4000/graphql\
-X POST\
-H 'Content-type: application/json'\
-d '
{
"query":"{ hello }"
}
'
{"data":{"hello":"Hello, world!"}}
GraphQL
Slide 30
Slide 30 text
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);
Slide 31
Slide 31 text
GraphiQL
Slide 32
Slide 32 text
GraphiQLで遊んでみる
● SWAPI GraphQL Wrapper
http://graphql.org/swapi-graphql/
● GitHub API v4
https://developer.github.com/v4/
Slide 33
Slide 33 text
3. 便利な
ツールやサービス
Slide 34
Slide 34 text
GraphCMS
● いわゆるHeadless CMS: API-firstなCMS
● WebHookをサポート（有償版のみ）
● サインアップしてコンソールに入るとチュートリアルが
Slide 35
Slide 35 text
モデルを定義して
Slide 36
Slide 36 text
データを入力して
Slide 37
Slide 37 text
GraphiQLで確認する
Slide 38
Slide 38 text
スキーマ定義ファイルを
ダウンロードできる
Slide 39
Slide 39 text
Graphcool
● GraphQLバックエンドを提供するBaaS
● GraphCMSのように使いやすいUI
● GraphCMSより玄人向き
● WebHookあり
● イベントをフックできる関数をJavaScriptで定義可能
Slide 40
Slide 40 text
モデルを定義して
Slide 41
Slide 41 text
データを入力して
Slide 42
Slide 42 text
GraphiQLで確認する
Slide 43
Slide 43 text
スキーマ定義ファイルを
ダウンロードできる
Slide 44
Slide 44 text
望むなら関数を定義
Slide 45
Slide 45 text
こんな画面も用意されている
Slide 46
Slide 46 text
PostGraphQL
● ポスグレに作ってある既存のDBに対して、GraphQL APIを
自動的につくってくれるツール
Slide 47
Slide 47 text
使い方
$ npm install -g postgraphql
$ postgraphql\
-c postgres://user@host/db\
--export-schema-graphql schema.txt
Slide 48
Slide 48 text
使い方
$ npm install -g postgraphql
$ postgraphql\
-c postgres://user@host/db\
--export-schema-graphql schema.txt
DBのURL
スキーマ定義
ファイルの出力
Slide 49
Slide 49 text
すごいよ！！！！
Slide 50
Slide 50 text
Apollo GraphQL
● GraphQLのライブラリやらを作ってるコミュニティ
Slide 51
Slide 51 text
Apollo GraphQL Client for Android
スキーマ定義とクエリ定義
からJavaコードを
自動生成してくれる！！
Slide 52
Slide 52 text
まとめ・雑感
● GraphQLはクエリ言語でAPIが便利に
● シンプルながら強力な機能
● API作るときにURL考えなくてよいの助かる
● ちょっとしたサービスならGraphcoolだけで自分でサーバを用
意する必要なさそう
● PostGraphQL、すごいけど使い道わからない
● コード生成できるし言うことなしでは