React + Amplify + AppSync + DynamoDB でサーバレスなWebアプリを作成する公式チュートリアルをやってみた

$ npx create-react-app myapp

$ cd myapp
$ npm install @aws-amplify/api @aws-amplify/pubsub

$ npm start

$ amplify init 

? Enter a name for the project myapp

? Enter a name for the environment dev

? Choose your default editor:

? Choose the type of app that you're building

? What javascript framework are you using

? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start

? Do you want to use an AWS profile?

? Please choose the profile you want to use

✔ Successfully created initial AWS cloud resources for deployments.
✔ Initialized provider successfully.
Initialized your environment successfully.

 $ amplify status
Current Environment: dev
| Category | Resource name | Operation | Provider plugin |
| -------- | ------------- | --------- | --------------- |

$ amplify add api 

? Please select from one of the below mentioned services:GraphQL

? Provide API name:myapp

? Choose the default authorization type for the API

? Enter a description for the API key:

? After how many days from now the API key should expire (1-365):7

? Do you want to configure advanced settings for the GraphQL API

? Do you have an annotated GraphQL schema?

? Do you want a guided schema creation?

? What best describes your project: (Use arrow keys)
❯ Single object with fields (e.g., “Todo” with ID, name, description)
  One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”)

? Do you want to edit the schema now? (Y/n)

$ amplify push

Current Environment: dev
| Category | Resource name | Operation | Provider plugin   |
| -------- | ------------- | --------- | ----------------- |
| Api      | myapp         | Create    | awscloudformation |
? Are you sure you want to continue? (Y/n)

GraphQL schema compiled successfully.

? Do you want to generate code for your newly created GraphQL API

? Choose the code generation language target

? Enter the file name pattern of graphql queries, mutations and subscriptions 

? Do you want to generate/update all possible GraphQL operations - queries, muta
tions and subscription

? Enter maximum statement depth [increase from default if your schema is deeply
nested]

GraphQL endpoint: https://xxxxxxxxxxxxxxxxxx.appsync-api.ap-northeast-1.amazonaws.com/graphql
GraphQL API KEY: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

import React, { useEffect, useReducer } from 'react';

import API, { graphqlOperation } from '@aws-amplify/api';
import PubSub from '@aws-amplify/pubsub';

import { createTodo } from './graphql/mutations';
import { listTodos } from './graphql/queries';
import { onCreateTodo } from './graphql/subscriptions';

import awsconfig from './aws-exports';
import './App.css';

API.configure(awsconfig);
PubSub.configure(awsconfig);

// Action Types
const QUERY = 'QUERY';
const SUBSCRIPTION = 'SUBSCRIPTION';

const initialState = {
  todos: [],
};

const reducer = (state, action) => {
  switch (action.type) {
    case QUERY:
      return {...state, todos: action.todos};
    case SUBSCRIPTION:
      return {...state, todos:[...state.todos, action.todo]}
    default:
      return state;
  }
};

async function createNewTodo() {
  const todo = { name: "Use AWS AppSync", description: "RealTime and Offline" };
  await API.graphql(graphqlOperation(createTodo, { input: todo }));
}

function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    async function getData() {
      const todoData = await API.graphql(graphqlOperation(listTodos));
      dispatch({ type: QUERY, todos: todoData.data.listTodos.items });
    }
    getData();

    const subscription = API.graphql(graphqlOperation(onCreateTodo)).subscribe({
      next: (eventData) => {
        const todo = eventData.value.data.onCreateTodo;
        dispatch({ type: SUBSCRIPTION, todo });
      }
    });

    return () => subscription.unsubscribe();
  }, []);

  return (
    <div className="App">
      <button onClick={createNewTodo}>Add Todo</button>
      <div>
        {state.todos.length > 0 ? 
          state.todos.map((todo) => <p key={todo.id}>{todo.name} : {todo.description}</p>) :
          <p>Add some todos!</p> 
        }
      </div>
    </div>
  );
}

export default App;

$ amplify add hosting

$ amplify publish

$ git init
$ git add .
$ git commit -m "first commit"
$ git remote add origin git@github.com:【GitHubユーザー名】/【リポジトリ名】.git
$ git push origin master

$ amplify delete

✔ Project deleted in the cloud
Project deleted locally.