AmplifyでGraphQL API（AppSync）を利用してチュートリアル的なTodoアプリを作成してみた

$ sw_vers
ProductName:    macOS
ProductVersion: 11.6
BuildVersion:   20G165
$ node -v
v18.0.0
$ npm -v
8.6.0
$ amplify --v
8.2.0
$ npm ls --depth=0
app-name@0.1.0 /xx/xx/aws/amplify/app-name
├── @testing-library/jest-dom@5.16.4
├── @testing-library/react@13.3.0
├── @testing-library/user-event@13.5.0
├── aws-amplify@4.3.24
├── react-dom@18.1.0
├── react-scripts@5.0.1
├── react@18.1.0
└── web-vitals@2.1.4

$ npx create-react-app app-name
$ cd app-name
$ amplify init

$ amplify add api
// 以下のサービスからお選びください（GraphQLかRESTを選択）
? Select from one of the below mentioned services: GraphQL
❯ GraphQL 
  REST 
// これから作成するGraphQL APIはこちらです。編集する設定を選択するか、続ける
// デフォルトの認可モードはAPI Keyです。API Keyを利用してGraphQL APIを利用できます。
? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue
  Name: basic 
  Authorization modes: API key (default, expiration time: 7 days from now) 
  Conflict detection (required for DataStore): Disabled 
❯ Continue 
// スキーマテンプレートを選択します。
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)
❯ Single object with fields (e.g., “Todo” with ID, name, description) 
  One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”) 
  Blank Schema 

// 警告: あなたのGraphQL APIは現在、API Keyを介してすべてのモデルへのパブリックな作成、読み取り、更新、および削除アクセスを許可しています。PRODUCTION-READYの認可ルールを設定するには、https://docs.amplify.aws/cli/graphql/authorization-rules をご覧ください。
// この意味は後述します。
⚠️  WARNING: your GraphQL API currently allows public create, read, update, and delete access to all models via an API Key. To configure PRODUCTION-READY authorization rules, review: https://docs.amplify.aws/cli/graphql/authorization-rules

// GraphQLスキーマのコンパイルに成功しました。
✅ GraphQL schema compiled successfully.

// スキーマを .../amplify/backend/api/basic/schema.graphql で編集するか、 .graphql ファイルを .../amplify/backend/api/basic/schema ディレクトリに配置してください。
Edit your schema at /xx/xx/aws/amplify/react-amplified/amplify/backend/api/basic/schema.graphql or place .graphql files in a directory at /xx/xx/aws/amplify/react-amplified/amplify/backend/api/basic/schema
// 今すぐスキーマを編集しますか？
✔ Do you want to edit the schema now? (Y/n) · yes
// エディターでファイルを編集する
Edit the file in your editor: /xx/xx/aws/amplify/react-amplified/amplify/backend/api/basic/schema.graphql
// ローカルにリソースベーシックを追加することに成功
✅ Successfully added resource basic locally

// 次のステップ
✅ Some next steps:
// すべてのローカルバックエンドリソースを構築し、クラウドにプロビジョニングします。
"amplify push" will build all your local backend resources and provision it in the cloud
// ローカルのバックエンドとフロントエンドのリソースをすべて構築し（ホスティングカテゴリが追加されている場合）、それをクラウドにプロビジョニングします。
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

// この「入力」は、このスキーマのすべてのモデルへのパブリックアクセスを可能にするグローバルな認可ルールを設定します。
// 認可ルールについて詳しくはこちら: https://docs.amplify.aws/cli/graphql/authorization-rules
# This "input" configures a global authorization rule to enable public access to
# all models in this schema. Learn more about authorization rules here: https://docs.amplify.aws/cli/graphql/authorization-rules
input AMPLIFY { globalAuthRule: AuthRule = { allow: public } } # FOR TESTING ONLY!

type Todo @model {
  id: ID!
  name: String!
  description: String
}

input AMPLIFY { globalAuthRule: AuthRule = { allow: public } } # FOR TESTING ONLY!

$ amplify push

import React, { useState, useEffect } from 'react';
import './App.css';
import { Amplify, API, graphqlOperation } from 'aws-amplify';
import awsconfig from './aws-exports';
import { createTodo as createTodoMutation, updateTodo as updateTodoMutation, deleteTodo as deleteTodoMutation } from './graphql/mutations';
import { listTodos } from './graphql/queries';
Amplify.configure(awsconfig);


function App() {
  const [todos, setTodos] = useState([]);
  const [checkUseEffect, setCheckUseEffect] = useState(false)
  const formState = {name: "", description: ""}

  useEffect(() => {
    console.log("useEffect実行")
    fetchTodos();
  },[checkUseEffect]);

  async function fetchTodos(){
    const apiData = await API.graphql(graphqlOperation(listTodos))
    setTodos(apiData.data.listTodos.items);
  }

  async function createTodo(todo) {
    console.log("createTodo関数実行")
    await API.graphql(graphqlOperation(createTodoMutation, {input: todo}));
    reloadTodoList();
  }

  async function updateTodo(id, name, description) {
    console.log("updateTodo関数実行");
    console.log(id)
    console.log(name)
    console.log(description)
    await API.graphql(graphqlOperation(updateTodoMutation, {
        input: {
          id: id,
          name: name,
          description: description
        }
    }));
    reloadTodoList();
  }

  async function deleteTodo(id){
    console.log("deleteTodo関数開始");
    await API.graphql(graphqlOperation(deleteTodoMutation, {
      input: {
        id: id
      }
    }))
    reloadTodoList();
  }

  function reloadTodoList(){
    setCheckUseEffect(!checkUseEffect);
  }

  function updateFormState(key, value){
    formState[key] = value;
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Todoアプリ</h1>
        <input placeholder="Todoのタイトル" onChange={e => updateFormState("name", e.target.value)} />
        <input placeholder="Todoの説明" onChange={e => updateFormState("description", e.target.value)} />
        <button onClick={() => createTodo(formState)}>Todo作成</button>
        <h2>Todo一覧</h2>
        <div style={{marginBottom: 30}}>
        {
          todos.map(todo => {
            const input_name_id = todo.id + "name";
            const input_description_id = todo.id + "description";
            return (
              <div key={todo.id}>
              {
                <div>
                  <input
                    id={input_name_id}
                    type="text"
                    defaultValue={todo.name}
                  />
                  <input
                    id={input_description_id}
                    type="text"
                    defaultValue={todo.description}
                  />
                  <button type="button" onClick={() => updateTodo(todo.id, document.getElementById(input_name_id).value, document.getElementById(input_description_id).value)}>更新</button>
                  <button type="button" onClick={() => deleteTodo(todo.id)}>削除</button>
                </div>
              }
              </div>
            )
          })
        }
        </div>
      </header>
    </div>
  );
}

export default App;

$ npm install aws-amplify
$ npm start

{
    "query": "mutation CreateTodo($input: CreateTodoInput!, $condition: ModelTodoConditionInput) {\n  createTodo(input: $input, condition: $condition) {\n    id\n    name\n    description\n    createdAt\n    updatedAt\n  }\n}\n",
    "variables": {
        "input": {
            "name": "SAP試験",
            "description": "6/10試験日"
        }
    }
}

{
  "data": {
    "createTodo": {
      "id": "817bc40f-9981-4c8e-aa8e-5acadf6e50dd",
      "name": "SAP試験",
      "description": "6/10試験日",
      "createdAt": "2022-06-04T12:14:21.367Z",
      "updatedAt": "2022-06-04T12:14:21.367Z"
    }
  }
}

import { createTodo as createTodoMutation, updateTodo as updateTodoMutation, deleteTodo as deleteTodoMutation } from './graphql/mutations';

const formState = {name: "", description: ""}

async function createTodo(todo) {
  console.log("createTodo関数実行")
  await API.graphql(graphqlOperation(createTodoMutation, {input: todo}));
  reloadTodoList();
}

function updateFormState(key, value){
  formState[key] = value;
}

<input placeholder="Todoのタイトル" onChange={e => updateFormState("name", e.target.value)} />
<input placeholder="Todoの説明" onChange={e => updateFormState("description", e.target.value)} />
<button onClick={() => createTodo(formState)}>Todo作成</button>

import { listTodos } from './graphql/queries';

const [todos, setTodos] = useState([]);
const [checkUseEffect, setCheckUseEffect] = useState(false)

  useEffect(() => {
    console.log("useEffect実行")
    fetchTodos();
  },[checkUseEffect]);

  async function fetchTodos(){
    const apiData = await API.graphql(graphqlOperation(listTodos))
    setTodos(apiData.data.listTodos.items);
  }

        {
          todos.map(todo => {
            const input_name_id = todo.id + "name";
            const input_description_id = todo.id + "description";
            return (
              <div key={todo.id}>
              {
                <div>
                  <input
                    id={input_name_id}
                    type="text"
                    defaultValue={todo.name}
                  />
                  <input
                    id={input_description_id}
                    type="text"
                    defaultValue={todo.description}
                  />
                  <button type="button" onClick={() => updateTodo(todo.id, document.getElementById(input_name_id).value, document.getElementById(input_description_id).value)}>更新</button>
                  <button type="button" onClick={() => deleteTodo(todo.id)}>削除</button>
                </div>
              }
              </div>
            )
          })
        }

import { createTodo as createTodoMutation, updateTodo as updateTodoMutation, deleteTodo as deleteTodoMutation } from './graphql/mutations';

  async function updateTodo(id, name, description) {
    console.log("updateTodo関数実行");
    console.log(id)
    console.log(name)
    console.log(description)
    await API.graphql(graphqlOperation(updateTodoMutation, {
        input: {
          id: id,
          name: name,
          description: description
        }
    }));
    reloadTodoList();
  }

  <input
    id={input_name_id}
    type="text"
    defaultValue={todo.name}
  />
  <input
    id={input_description_id}
    type="text"
    defaultValue={todo.description}
  />
<button type="button" onClick={() => updateTodo(todo.id, document.getElementById(input_name_id).value, document.getElementById(input_description_id).value)}>更新</button>

import { createTodo as createTodoMutation, updateTodo as updateTodoMutation, deleteTodo as deleteTodoMutation } from './graphql/mutations';

  async function deleteTodo(id){
    console.log("deleteTodo関数開始");
    await API.graphql(graphqlOperation(deleteTodoMutation, {
      input: {
        id: id
      }
    }))
    reloadTodoList();
  }

<input
 id={input_name_id}
 type="text"
 defaultValue={todo.name}
/>
<input
 id={input_description_id}
 type="text"
 defaultValue={todo.description}
/>
<button type="button" onClick={() => deleteTodo(todo.id)}>削除</button>

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

const [checkUseEffect, setCheckUseEffect] = useState(false)

  useEffect(() => {
    console.log("useEffect実行")
    fetchTodos();
  },[checkUseEffect]);

  function reloadTodoList(){
    setCheckUseEffect(!checkUseEffect);
  }

useEffect(() => {
  fetchTodos();
},[todos]);

async function fetchTodos(){
  const apiData = await API.graphql(graphqlOperation(listTodos))
  setTodos(apiData.data.listTodos.items);
}