GraphQL入門

Transcript

1. GraphQL 入門

2. 長澤 太郎 • エムスリー株式会社 • 日本Kotlinユーザグループ代表

3. もくじ 1. GraphQLとは 2. GraphQLを始める 3. 便利なツールやサービス

4. 1. GraphQLとは

5. None

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、すごいけど使い道わからない • コード生成できるし言うことなしでは