Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

昨年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)の内容を元に紹介している内容です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away