GraphQL入門

エムスリー Tech Talk で発表したスライドです。

Transcript

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