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