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

GraphQL入門

 GraphQL入門

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

Taro Nagasawa

January 26, 2018
Tweet

More Decks by Taro Nagasawa

Other Decks in Programming

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://[email protected]/db\
    --export-schema-graphql schema.txt

    View Slide

  48. 使い方
    $ npm install -g postgraphql
    $ postgraphql\
    -c postgres://[email protected]/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