AWS
React
GraphQL
AppSync

AWS AppSyncとReactでToDoアプリを作ってみよう (0)はじめに

昨年12月のAWS re:Invent 2017で発表されたAWS AppSyncのパブリックプレビュー申請が通ったので、ToDoアプリの作成を例にして、AppSync + ReactでWebアプリを構築する際の流れを紹介していきたいと思います。

この記事で取り上げる内容

この記事では、あえてGraphQLスキーマの定義からReactでのクライアント側の実装までを順を追って説明していきます。
ToDoアプリのスキーマについては、AWS公式ドキュメントのDesigning a GraphQL APIに記載されている内容に沿って作成していきます。

とりあえずサクッとサンプルを動かしたいという方は、次のような記事の内容を参考に AWS公式のサンプルを動作させてみるのも良いと思います。(自分も最初はこのサンプルを動かしてみて雰囲気を掴みました)

目次

今回は、記事が長くなりそうなので、何回かに分けて内容を紹介していきます。

  1. AWS AppSyncとReactでToDoアプリを作ってみよう (0)はじめに ←今回はこの記事
  2. AWS AppSyncとReactでToDoアプリを作ってみよう (1)GraphGLスキーマの定義
  3. AWS AWS AppSyncとReactでToDoアプリを作ってみよう (2)DataSourceとResolverの設定
  4. AWS AppSyncとReactでToDoアプリを作ってみよう (3)Reactアプリの作成

事前知識

GraphQL

AWS AppSyncでは、クライアントからAppSyncで作成したAPIへのクエリの際にGraphQLを利用します。

次の記事などを参考にしてサラッと概要を掴んでおけば、問題ないかと思います。

React

今回の記事では、AWSからクライアントライブラリが出ていて、一番簡単に実装できそうなReactでクライアント側の実装を行います。
使用するライブラリaws-appsyncが、内部的にReduxを使用しているため、React + Reduxに触ったことがあるとよいかと思います。

注意点

この記事は、AWS AppSyncのパブリックプレビュー時点(2018/01/22)の内容を元に紹介している内容です。