GraphQL入門

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

Transcript

1. GraphQL
   入門
   

   View Slide

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

   View Slide

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

   View Slide

4. 1. GraphQLとは
   

   View Slide

5. View Slide

6. GraphQL
   ● Facebook発OSSであるクエリ言語
   ○ REST APIに代わるリソース操作方法を提供
   ○ HTTPだけでなく、gRPCやThriftの上でも動く
   ● 必要なものだけ取得できる
   ● 一度のリクエストで関連するものすべてを取得できる
   ● 型システム
   ● API定義コードがそのままドキュメントに
   

   View Slide

7. スキーマとクエリ
   type Query {
   hello: String
   }
   {
   hello
   }
   スキーマ クエリ
   {
   "data": { "hello": "Hello, world!" }
   }
   レスポンス
   

   View Slide

8. スキーマとクエリ
   type Query {
   hello: String
   }
   {
   hello
   }
   スキーマ クエリ
   {
   "data": { "hello": "Hello, world!" }
   }
   レスポンス
   型
   

   View Slide

9. スキーマとクエリ
   type Query {
   hello: String
   }
   {
   hello
   }
   スキーマ クエリ
   {
   "data": { "hello": "Hello, world!" }
   }
   レスポンス
   クエリと結果が同じ形！
   

   View Slide

10. {
    hello {
    content
    }
    }
    ユーザ定義型
    type Message {
    content: String
    }
    type Query {
    hello: Message
    }
    {
    "data": { "hello": { "content": "Hello, world!" } }
    }
    

    View Slide

11. {
    hello {
    priority
    }
    }
    列挙型
    enum Priority {
    HIGH, NORMAL
    }
    type Message {
    content: String,
    priority: Priority
    }
    type Query {
    hello: Message
    }
    {
    "data": {"hello": { "priority": "HIGH" } }
    }
    

    View Slide

12. {
    hello {
    priority
    }
    }
    列挙型
    enum Priority {
    HIGH, NORMAL
    }
    type Message {
    content: String,
    priority: Priority
    }
    type Query {
    hello: Message
    }
    {
    "data": {"hello": { "priority": "HIGH" } }
    }
    クエリと結果が同じ形！
    必要なフィールドを自由に選
    択できる！
    

    View Slide

13. 関連するデータ（スキーマ）
    type User {
    name: String,
    messages: [Message]
    }
    enum Priority {
    HIGH, NORMAL
    }
    type Message {
    content: String,
    priority: Priority
    user: User
    }
    type Query {
    hello: Message
    }
    

    View Slide

14. 関連するデータ（クエリ）
    {
    hello {
    content,
    user {
    name
    }
    }
    {
    "data": {
    "hello": {
    "content": "Hello, world!",
    "user": { "name": "Taro" }
    }
    }
    }
    

    View Slide

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!
    }
    

    View Slide

16. コメント
    # ただのコメント
    "ドキュメント用のコメント"
    type Message {
    "内容"
    content: String!,
    "優先度"
    priority: Priority!
    "投稿者"
    user: User!
    }
    

    View Slide

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
    }
    

    View Slide

18. ミューテーションoperation
    mutation {
    createMessage(content: "Hello, world!") {
    id
    content
    }
    }
    

    View Slide

19. ミューテーションoperation
    mutation {
    createMessage(content: "Hello, world!") {
    id
    content
    }
    }
    query {
    getAllMessages {
    id
    content
    }
    }
    ちなみに、クエリは指定もできるし省略もできる
    

    View Slide

20. データの変更を受け取る"第3のoperation"
    subscription {
    Message(filter: {
    mutation_in: [UPDATED, DELETED]
    }) {
    mutation
    node {
    id
    content
    }
    previousValues {
    id
    content
    }
    }
    }
    

    View Slide

21. データの変更を受け取る"第3のoperation"
    subscription {
    Message(filter: {
    mutation_in: [UPDATED, DELETED]
    }) {
    mutation
    node {
    id
    content
    }
    previousValues {
    id
    content
    }
    }
    }
    ミューテーションの種
    類でフィルタ
    ミューテーションの種類
    どういう操作があったのか
    変更後の値
    変更前の値
    

    View Slide

22. 2. GraphQLを始める
    

    View Slide

23. 好きな言語で実装しよう
    

    View Slide

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);
    

    View Slide

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);
    スキーマの定義
    

    View Slide

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の実装
    

    View Slide

27. 起動してクエリを実行
    curl http://localhost:4000/graphql\
    -X POST\
    -H 'Content-type: application/json'\
    -d '
    {
    "query":"{ hello }"
    }
    '
    {"data":{"hello":"Hello, world!"}}
    

    View Slide

28. 起動してクエリを実行
    curl http://localhost:4000/graphql\
    -X POST\
    -H 'Content-type: application/json'\
    -d '
    {
    "query":"{ hello }"
    }
    '
    {"data":{"hello":"Hello, world!"}}
    JSON
    

    View Slide

29. 起動してクエリを実行
    curl http://localhost:4000/graphql\
    -X POST\
    -H 'Content-type: application/json'\
    -d '
    {
    "query":"{ hello }"
    }
    '
    {"data":{"hello":"Hello, world!"}}
    GraphQL
    

    View Slide

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);
    

    View Slide

31. GraphiQL
    

    View Slide

32. GraphiQLで遊んでみる
    ● SWAPI GraphQL Wrapper
    http://graphql.org/swapi-graphql/
    ● GitHub API v4
    https://developer.github.com/v4/
    

    View Slide

33. 3. 便利な
    ツールやサービス
    

    View Slide

34. GraphCMS
    ● いわゆるHeadless CMS: API-firstなCMS
    ● WebHookをサポート（有償版のみ）
    ● サインアップしてコンソールに入るとチュートリアルが
    

    View Slide

35. モデルを定義して
    

    View Slide

36. データを入力して
    

    View Slide

37. GraphiQLで確認する
    

    View Slide

38. スキーマ定義ファイルを
    ダウンロードできる
    

    View Slide

39. Graphcool
    ● GraphQLバックエンドを提供するBaaS
    ● GraphCMSのように使いやすいUI
    ● GraphCMSより玄人向き
    ● WebHookあり
    ● イベントをフックできる関数をJavaScriptで定義可能
    

    View Slide

40. モデルを定義して
    

    View Slide

41. データを入力して
    

    View Slide

42. GraphiQLで確認する
    

    View Slide

43. スキーマ定義ファイルを
    ダウンロードできる
    

    View Slide

44. 望むなら関数を定義
    

    View Slide

45. こんな画面も用意されている
    

    View Slide

46. PostGraphQL
    ● ポスグレに作ってある既存のDBに対して、GraphQL APIを
    自動的につくってくれるツール
    

    View Slide

47. 使い方
    $ npm install -g postgraphql
    $ postgraphql\
    -c postgres://user@host/db\
    --export-schema-graphql schema.txt
    

    View Slide

48. 使い方
    $ npm install -g postgraphql
    $ postgraphql\
    -c postgres://user@host/db\
    --export-schema-graphql schema.txt
    DBのURL
    スキーマ定義
    ファイルの出力
    

    View Slide

49. すごいよ！！！！
    

    View Slide

50. Apollo GraphQL
    ● GraphQLのライブラリやらを作ってるコミュニティ
    

    View Slide

51. Apollo GraphQL Client for Android
    スキーマ定義とクエリ定義
    からJavaコードを
    自動生成してくれる！！
    

    View Slide

52. まとめ・雑感
    ● GraphQLはクエリ言語でAPIが便利に
    ● シンプルながら強力な機能
    ● API作るときにURL考えなくてよいの助かる
    ● ちょっとしたサービスならGraphcoolだけで自分でサーバを用
    意する必要なさそう
    ● PostGraphQL、すごいけど使い道わからない
    ● コード生成できるし言うことなしでは
    

    View Slide