Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project lessonAmplifyNext
The following configuration will be applied:

Project information
| Name: lessonAmplifyNext
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? Yes
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Please choose the profile you want to use default
Adding backend environment dev to AWS Amplify Console app: xxxxxxxxxxxxxxx

#amplify
amplify/\#current-cloud-backend
amplify/.config/local-*
amplify/logs
amplify/mock-data
amplify/backend/amplify-meta.json
amplify/backend/awscloudformation
amplify/backend/.temp
build/
dist/
node_modules/
aws-exports.js
awsconfiguration.json
amplifyconfiguration.json
amplifyconfiguration.dart
amplify-build-config.json
amplify-gradle-config.json
amplifytools.xcconfig
.secret-*

Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify console" to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

amplify add api

  const getTodos = async () => {
    const result = await API.graphql(graphqlOperation(listTodos));
      console.log(result.data.listTodos.items);
  };

  const getTodos = async () => {
    const result = await API.graphql(graphqlOperation(listTodos));
    if ('data' in result && result.data) {
      const data = result.data as ListTodosQuery;
      console.log(data.listTodos.items);
      setTodos(data.listTodos.items);
    }
  };

export const getPosts = async () => {
  try {
    const result = await API.graphql(graphqlOperation(listPosts));
    if ('data' in result && result.data) {
      const data = result.data as ListPostsQuery;

      return data.listPosts.items.filter((item) => !item._deleted);
      // リストから削除されたものを除外（データ自体はしばらく残っているので）
    }
  } catch (error) {
    console.error(error);
  }
};

export const addPost = async (input: CreatePostInput) => {
  if (!input.name || !input.title || !input.content)
    return alert('入力してください');
  try {
    await API.graphql(graphqlOperation(createPost, { input }));
  } catch (error) {
    console.log(error);
  }
};

export const subscribePost = (refetch: () => void) => {
  const onCreatePost = (
    API.graphql(
      graphqlOperation(subscriptions.onCreatePost)
    ) as Observable<OnCreatePostSubscription>
  ).subscribe({
    next: ({ value: { data } }: any) => {
      refetch();
    },
    error: (error) => console.error(error),
  });

  const onDeletePost = (
    API.graphql(
      graphqlOperation(subscriptions.onDeletePost)
    ) as Observable<OnDeletePostSubscription>
  ).subscribe({
    next: ({ value: { data } }: any) => {
      refetch();
    },
    error: (error) => console.error(error),
  });

  return [onCreatePost, onDeletePost];
};

  useEffect(() => {
    const dataFetch = () => {
      getPosts().then((posts) => {
        setPosts(posts);
      });
    };

    /* 1回目の取得 */
    dataFetch();

    /* それ以降の監視と再Fetch */
    const [onCreate, onDelete] = subscribePost(dataFetch);

    return () => {
      onCreate.unsubscribe();
      onDelete.unsubscribe();
    };
  }, []);