Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GraphQL入門

 GraphQL入門

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

14c9795d267f5b85abb98ca5e8780646?s=128

Taro Nagasawa

January 26, 2018
Tweet

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