Amplify Gen1 チュートリアルアプリケーションを手動で Amplify Gen2 に移行してみた

iwasa.takahito@HL01200 hoge1018amplify % amplify add auth
Using service: Cognito, provided by: awscloudformation

 The current configured provider is Amazon Cognito.

 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections.
 How do you want users to be able to sign in? Email
 Do you want to configure advanced settings? No, I am done.
✅ Successfully added auth resource hoge1018amplify2637ba75 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

iwasa.takahito@HL01200 hoge1018amplify % amplify push
✔ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev

┌──────────┬─────────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name           │ Operation │ Provider plugin   │
├──────────┼─────────────────────────┼───────────┼───────────────────┤
│ Auth     │ hoge1018amplify2637ba75 │ Create    │ awscloudformation │
└──────────┴─────────────────────────┴───────────┴───────────────────┘
✔ Are you sure you want to continue? (Y/n) · yes

Deployment completed.
Deploying root stack hoge1018amplify [ ====================-------------------- ] 1/2
        amplify-hoge1018amplify-dev-f… AWS::CloudFormation::Stack     UPDATE_IN_PROGRESS             Fri Oct 18 2024 1
        authhoge1018amplify2637ba75    AWS::CloudFormation::Stack     CREATE_COMPLETE                Fri Oct 18 2024 1
Deployed auth hoge1018amplify2637ba75 [ ======================================== ] 6/6
        UserPool                       AWS::Cognito::UserPool         CREATE_COMPLETE                Fri Oct 18 2024 1
        UserPoolClientRole             AWS::IAM::Role                 CREATE_IN_PROGRESS             Fri Oct 18 2024 1
        UserPoolClient                 AWS::Cognito::UserPoolClient   CREATE_COMPLETE                Fri Oct 18 2024 1
        UserPoolClientWeb              AWS::Cognito::UserPoolClient   CREATE_COMPLETE                Fri Oct 18 2024 1
        IdentityPool                   AWS::Cognito::IdentityPool     CREATE_COMPLETE                Fri Oct 18 2024 1
        IdentityPoolRoleMap            AWS::Cognito::IdentityPoolRol… CREATE_COMPLETE                Fri Oct 18 2024 1

Deployment state saved successfully.

iwasa.takahito@HL01200 hoge1021amplify % npm create amplify@latest
> [email protected] npx
> create-amplify
? Where should we create your project? .
Error: An amplify directory already exists at /Users/iwasa.takahito/work/hoge1021gen1togen2/hoge1021amplify/amplify. If you are trying to run an Amplify Gen 2 command inside an Amplify Gen 1 project we recommend creating the project in another directory. Learn more about AWS Amplify Gen 2: https://docs.amplify.aws/gen2/how-amplify-works/
npm error code 1
npm error path /Users/iwasa.takahito/work/hoge1021gen1togen2/hoge1021amplify
npm error command failed
npm error command sh -c create-amplify
npm error A complete log of this run can be found in: /Users/iwasa.takahito/.npm/_logs/2024-10-20T20_49_39_184Z-debug-0.log

import { useEffect, useState } from 'react';
// import { generateClient } from 'aws-amplify/api';
import { generateClient } from 'aws-amplify/data';
import type { Schema } from '../amplify/data/resource';
// import { createTodo } from './graphql/mutations';
// import { listTodos } from './graphql/queries';
// import { type CreateTodoInput, type Todo } from './API';
// const initialState: CreateTodoInput = { name: '', description: '' };
const initialState = { name: '', description: '' };
// const client = generateClient();
const client = generateClient<Schema>();
const App = () => {
  //const [formState, setFormState] = useState<CreateTodoInput>(initialState);
  const [formState, setFormState] = useState(initialState);
  // const [todos, setTodos] = useState<Todo[] | CreateTodoInput[]>([]);
  const [todos, setTodos] = useState<Schema["Todo"]["type"][]>([]);
  useEffect(() => {
    fetchTodos();
  }, []);
  async function fetchTodos() {
    try {
      // const todoData = await client.graphql({
      //   query: listTodos,
      // });
      // const todos = todoData.data.listTodos.items;
      const { data: todos } = await client.models.Todo.list();
      setTodos(todos);
    } catch (err) {
      console.log('error fetching todos');
    }
  }
  async function addTodo() {
    try {
      if (!formState.name || !formState.description) return;
      const todo = { ...formState };
      // setTodos([...todos, todo]);
      setFormState(initialState);
      // await client.graphql({
      //   query: createTodo,
      //   variables: {
      //     input: todo,
      //   },
      // });
      await client.models.Todo.create(todo);
    } catch (err) {
      console.log('error creating todo:', err);
    }
  }
  return (
    <div style={styles.container}>
      <h2>Amplify Todos</h2>
      <input
        onChange={(event) =>
          setFormState({ ...formState, name: event.target.value })
        }
        style={styles.input}
        value={formState.name}
        placeholder="Name"
      />
      <input
        onChange={(event) =>
          setFormState({ ...formState, description: event.target.value })
        }
        style={styles.input}
        value={formState.description as string}
        placeholder="Description"
      />
      <button style={styles.button} onClick={addTodo}>
        Create Todo
      </button>
      {todos.map((todo, index) => (
        <div key={todo.id ? todo.id : index} style={styles.todo}>
          <p style={styles.todoName}>{todo.name}</p>
          <p style={styles.todoDescription}>{todo.description}</p>
        </div>
      ))}
    </div>
  );
};
: