昨年12月のAWS re:Invent 2017で発表されたAWS AppSyncのパブリックプレビュー申請が通ったので、ToDoアプリの作成を例にして、AppSync + ReactでWebアプリを構築する際の流れを紹介していきたいと思います。
この記事で取り上げる内容
この記事では、あえてGraphQLスキーマの定義からReactでのクライアント側の実装までを順を追って説明していきます。
ToDoアプリのスキーマについては、AWS公式ドキュメントのDesigning a GraphQL APIに記載されている内容に沿って作成していきます。
とりあえずサクッとサンプルを動かしたいという方は、次のような記事の内容を参考に AWS公式のサンプルを動作させてみるのも良いと思います。(自分も最初はこのサンプルを動かしてみて雰囲気を掴みました)
目次
今回は、記事が長くなりそうなので、何回かに分けて内容を紹介していきます。
- AWS AppSyncとReactでToDoアプリを作ってみよう (0)はじめに ←今回はこの記事
- AWS AppSyncとReactでToDoアプリを作ってみよう (1)GraphGLスキーマの定義
- AWS AWS AppSyncとReactでToDoアプリを作ってみよう (2)DataSourceとResolverの設定
- 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)の内容を元に紹介している内容です。