AppSyncのSample schemaでGraphQLを触ってみる

Sample schemaってのがあるので、それで一式作る。 ざっくりと GraphQLで欲しいデータだけ決めうちで取得できる DynamoDBへのデータ投入が簡単(Lambda・aws-sdkいらず) 複数テーブルまた […]

広告ここから
広告ここまで

目次

    Sample schemaってのがあるので、それで一式作る。

    ざっくりと

    • GraphQLで欲しいデータだけ決めうちで取得できる
    • DynamoDBへのデータ投入が簡単(Lambda・aws-sdkいらず)
    • 複数テーブルまたぎのデータ取得とかもいい感じにできる(っぽい)

    できるschema

    type Comment {
    	# The id of the comment's parent event.
    	eventId: ID!
    	# A unique identifier for the comment.
    	commentId: String!
    	# The comment's content.
    	content: String!
    	# The comment timestamp. This field is indexed to enable sorted pagination.
    	createdAt: String!
    }
    
    type CommentConnection {
    	items: [Comment]
    	nextToken: String
    }
    
    type Event {
    	id: ID!
    	name: String
    	where: String
    	when: String
    	description: String
    	# Paginate through all comments belonging to an individual post.
    	comments(limit: Int, nextToken: String): CommentConnection
    }
    
    type EventConnection {
    	items: [Event]
    	nextToken: String
    }
    
    type Mutation {
    	# Create a single event.
    	createEvent(
    		name: String!,
    		when: String!,
    		where: String!,
    		description: String!
    	): Event
    	# Delete a single event by id.
    	deleteEvent(id: ID!): Event
    	# Comment on an event.
    	commentOnEvent(eventId: ID!, content: String!, createdAt: String!): Comment
    }
    
    type Query {
    	# Get a single event by id.
    	getEvent(id: ID!): Event
    	# Paginate through events.
    	listEvents(limit: Int, nextToken: String): EventConnection
    }
    
    type Subscription {
    	subscribeToEventComments(eventId: String!): Comment
    		@aws_subscribe(mutations: ["commentOnEvent"])
    }
    
    schema {
    	query: Query
    	mutation: Mutation
    	subscription: Subscription
    }

    データを入れる

    GraphQLでのデータ操作はMutationとよぶ様子。サンプルで使えるのはcreateEvent,deleteEvent,commentOneventの3つ。Schemaをみるとどんな値を投げればいいかはだいたいわかる。

    type Mutation {
    	# Create a single event.
    	createEvent(
    		name: String!,
    		when: String!,
    		where: String!,
    		description: String!
    	): Event
    	# Delete a single event by id.
    	deleteEvent(id: ID!): Event
    	# Comment on an event.
    	commentOnEvent(eventId: ID!, content: String!, createdAt: String!): Comment
    }
    

    とりあえずcreateEventしてみる。

    mutation add {
      createEvent(
        name: "second",
        when: "tomorrorow",
        where: "my home",
        description: "foo!"
      ) {
        id,
        name
      }
    }

    idnameを戻り値に指定したので、以下のように返って来る。

    {
      "data": {
        "createEvent": {
          "id": "b176ba23-33c5-4aab-b29d-ea23ade51d60",
          "name": "second"
        }
      }
    }

    データはDynamoDBに投入されている。

    データを取得する

    データの取得はQueryとよぶらしい。サンプルではgetEventlistEventsの2つが用意されている。

    type Query {
    	# Get a single event by id.
    	getEvent(id: ID!): Event
    	# Paginate through events.
    	listEvents(limit: Int, nextToken: String): EventConnection
    }

    getEventを試す

    一致するIDのイベントの、指定したデータだけ取ってきてくれます。

    query getEvent {
      getEvent(id: "0378cf38-5b2c-4996-a1a1-e33fa42d819c") {
        id,name, when
      }
    }
    
    // result
    {
      "data": {
        "getEvent": {
          "id": "0378cf38-5b2c-4996-a1a1-e33fa42d819c",
          "name": "first",
          "when": "tomorrorow"
        }
      }
    }

    listEventsを試す

    レスポンスの指定のときに、items: {}ってやるとエラーになるので要注意。

    query listEvent {
      listEvents {
        items { name, where, when }
      }
    }
    
    // result
    {
      "data": {
        "listEvents": {
          "items": [
            {
              "name": "first",
              "where": "my home",
              "when": "tomorrorow"
            },
            {
              "name": "second",
              "where": "my home",
              "when": "tomorrorow"
            }
          ]
        }
      }
    }

    コメントを投稿する

    サンプル ではもう1つ、eventに対してコメントを投稿できるmutationも用意されてます。

    mutation comment {
      commentOnEvent(
        eventId: "0378cf38-5b2c-4996-a1a1-e33fa42d819c",
        content: "yeah",
        createdAt: "today"
      ) {
        commentId,
        content
      }
    }

    こんな感じのクエリを実行すればOKです。

    DBまたぎにデータをとる

    ここまでは「API GW  + Lambda でもそんなに難しくないやん」となる範囲です。ここからは複数のDBからデータを取ってみましょう。幸いなことに、サンプルではevent とcommentの2つのDBがありましたので、早速クエリを出してみます。

    query list {
      listEvents {
        items {
          name, comments {
            items {
              content
            }
          }
        }
      }
    }

    実行結果はこんな感じになります。

    {
      "data": {
        "listEvents": {
          "items": [
            {
              "name": "first",
              "comments": {
                "items": [
                  {
                    "content": "yeah"
                  }
                ]
              }
            },
            {
              "name": "second",
              "comments": {
                "items": [
                  {
                    "content": "Foooo"
                  }
                ]
              }
            }
          ]
        }
      }
    }

    なんでこれができるのかという話ですが、schemaの方で以下のように定義されてるからです。

    type Event {
    	id: ID!
    	name: String
    	where: String
    	when: String
    	description: String
    	# Paginate through all comments belonging to an individual post.
    	comments(limit: Int, nextToken: String): CommentConnection
    }

    Eventで取れるデータの中にcommentsという形でcommentのデータも引けるように定義されていました。

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark