Amplify Data をセットアップする

import { a, defineData, type ClientSchema } from '@aws-amplify/backend';

const schema = a.schema({
  Todo: a.model({
      content: a.string(),
      isDone: a.boolean()
    })
    .authorization(allow => [allow.publicApiKey()])
});

// Used for code completion / highlighting when making requests from frontend
export type Schema = ClientSchema<typeof schema>;

// defines the data resource to be deployed
export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: 'apiKey',
    apiKeyAuthorizationMode: { expiresInDays: 30 }
  }
});

npx ampx sandbox

npm add aws-amplify

import { Amplify } from 'aws-amplify';
import outputs from '../amplify_outputs.json';

Amplify.configure(outputs);

import type { Schema } from '../amplify/data/resource';
import { Component } from '@angular/core';
import { generateClient } from 'aws-amplify/data';

const client = generateClient<Schema>();

@Component({
  selector: 'app-todo-list',
  template: `
    <button (click)="createTodo()">Add new todo</button>
  `
})
export class TodoListComponent {
  async createTodo() {
    await client.models.Todo.create({
      content: window.prompt("Todo content?"),
      isDone: false
    });
  }
}

import type { Schema } from '../amplify/data/resource';
import { Component, OnInit } from '@angular/core';
import { generateClient } from 'aws-amplify/data';

const client = generateClient<Schema>();

@Component({
  selector: 'app-todo-list',
  template: `
    <div>
      <button (click)="createTodo()">Add new todo</button>
      <ul>
        <li *ngFor="let todo of todos">{{ todo.content }}</li>
      </ul>
    </div>
  `
})
export class TodoListComponent implements OnInit {
  todos: Schema['Todo']['type'][] = [];

  async ngOnInit() {
    await this.fetchTodos();
  }

  async fetchTodos() {
    const { data: items } = await client.models.Todo.list();
    this.todos = items;
  }

  async createTodo() {
    await client.models.Todo.create({
      content: window.prompt('Todo content?'),
      isDone: false
    });
    await this.fetchTodos();
  }
}

import type { Schema } from '../../../amplify/data/resource';
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { generateClient } from 'aws-amplify/data';
import { Subscription } from 'rxjs';

const client = generateClient<Schema>();

@Component({
  selector: 'app-todos',
  standalone: true,
  imports: [CommonModule],
  template: `
    <main>
      <h1>My todos</h1>
      <button (click)="createTodo()">+ new</button>
      <ul>
        <li *ngFor="let todo of todos">
          {{ todo.content }}
        </li>
      </ul>
      <div>
        🥳 App successfully hosted. Try creating a new todo.
        <br />
        <a href="https://docs.amplify.aws/gen2/start/quickstart/">
          Review next steps of this tutorial.
        </a>
      </div>
    </main>
  `,
})
export class TodosComponent implements OnInit {
  todos: Schema['Todo']['type'][] = [];
  subscription?: Subscription;

  ngOnInit(): void {
    this.listTodos();
  }

  ngOnDestroy(): void {
    this.subscription?.unsubscribe();
  }

  listTodos() {
    try {
      this.subscription = client.models.Todo.observeQuery().subscribe({
        next: ({ items, isSynced }) => {
          this.todos = items;
        },
      });
    } catch (error) {
      console.error('error fetching todos', error);
    }
  }

  createTodo() {
    try {
      client.models.Todo.create({
        content: window.prompt('Todo content'),
      });
      this.listTodos();
    } catch (error) {
      console.error('error creating todos', error);
    }
  }
}