AWS AppSyncについて勉強してみた

こんにちは、弥生の八木です。

この記事は、Misoca+弥生+ALTOA Advent Calendar 2018の 22日目の記事です。

記事を書くにあたって、せっかくなので業務とは関係なく、気になる技術を勉強しようと思ったので、今回は、AWS AppSyncとそのバックグラウンドの技術であるGraphQLを勉強したことや簡単に作ってみたものについて書きます。

AWS AppSyncとは

GraphQLベースのAPIを作成でき、APIに合わせてDynamoDBを自動で作成できる「フルマネージドGraphQLサービス」です。 AWSのコンソール画面からDBを設計、設定をするだけで簡単にAPIとDBを作成できます。

GraphQLとは

GraphQLは、Facebookにより開発されたオープンソースのクエリ言語のことです。クエリ言語とは「問い合わせ言語」といい、コンピュータのデータに対して問い合わせるための言語で、代表的なクエリ言語だと、SQLが当てはまります。

以下のようなリクエスト、レスポンスになります。

リクエストサンプル

query list {
  listHoge {
    items {
      id  hoge
    }
  }
}

レスポンスサンプル

{
  "data": {
    listHoge": {
      "items": [
        {
          "id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
          "hoge": "hogehoge"
        }
      ]
    }
  }
}

実際に動かしてみた

やること

AWS AppSyncでAPIを作成し、クライアントからAPIにリクエストして、なんでもいいから結果を受け取って「AppSync使ってるぜ」感を味わう！

やったこと

WebクライアントからAWS AppSyncにアクセスできるようにする
AWS AppSyncでAPIとDBを作る
作成したAPIのエンドポイントなど設定する
WebクライアントからAPIにアクセスし、レスポンス結果を画面に表示する

APIとDBの作り方

AWSコンソールにログインし、「Create API」ボタンをクリックする
「Create with wizard」にチェックを入れ、「Start」ボタンをクリックする
「Model Name」に任意にDBの名称を付けて、「Configure model fields」でDBのカラムの設定をする、完了したら「Create」ボタンをクリックする
「API Name」に任意にAPIの名称を付けて、「Create」ボタンをクリックして完了です

作成したAPIは、AWSコンソール上でも動作させることができます

登録のクエリ f:id:ym_AdventC:20181218192142p:plain

取得のクエリ f:id:ym_AdventC:20181218192344p:plain

APIにアクセスして結果を取得

簡単にReactのサンプルプロジェクトをいじって取得した内容を表示させます。

Reactプロジェクト内のApp.jsの設定にGraphQLのクエリを記述し、レスポンス結果を取得する関数を作成

～～略～～

const ListTodos = `
query list{
  listTodos{
    items{
      id name description
    }
  }
}
`;

class App extends Component {
  state = {todos: []}
  async componentDidMount() {

    const todos = await API.graphql(graphqlOperation(ListTodos))
    console.log('todos:', todos)
    this.setState({todos: todos.data.listTodos.items})
  }

～～略～～

実際にWebブラウザからAPIにアクセス f:id:ym_AdventC:20181219180840p:plain