AWS Amplify Gen 2 でDynamoDBのGSIを設定してクエリする

import { useEffect, useState } from "react";
import type { Schema } from "../amplify/data/resource";
import { useAuthenticator } from '@aws-amplify/ui-react';
import { generateClient } from "aws-amplify/data";

const client = generateClient<Schema>();

function App() {
  const { user, signOut } = useAuthenticator();
  const [todos, setTodos] = useState<Array<Schema["Todo"]["type"]>>([]);

  useEffect(() => {
    const fetchTodoList = async () => {
      const response = await client.models.Todo.list();
      setTodos([...response.data]);
    }

    fetchTodoList();

    const createSub = client.models.Todo.onCreate().subscribe({
      next: (data) => {
        setTodos((prev) => [...prev, data]);
      }
    });

    const deleteSub = client.models.Todo.onDelete().subscribe({
      next: (data) => {
        setTodos((prev) => prev.filter((todo) => todo.id !== data.id));
      }
    });
    return () => {
      createSub.unsubscribe();
      deleteSub.unsubscribe();
    }
  }, []);

  function createTodo() {
    client.models.Todo.create({ content: window.prompt("Todo content") });
  }

  function deleteTodo(id: string) {
    client.models.Todo.delete({ id })
  }

  return (
    <main>
      <h1>{user?.signInDetails?.loginId}'s todos</h1>
      <button onClick={createTodo}>+ new</button>
      <ul>
        {todos.map((todo) => (
          <li onClick={() => deleteTodo(todo.id)} key={todo.id}>{todo.content}</li>
        ))}
      </ul>
      <div>
        🥳 App successfully hosted. Try creating a new todo.
        <br />
        <a href="https://docs.amplify.aws/react/start/quickstart/#make-frontend-updates">
          Review next step of this tutorial.
        </a>
      </div>
      <button onClick={signOut}>Sign out</button>
    </main>
  );
}

export default App;

import { useEffect, useState } from "react";
import type { Schema } from "../amplify/data/resource";
import { useAuthenticator, Loader } from '@aws-amplify/ui-react';
import { generateClient } from "aws-amplify/data";
import { FetchUserAttributesOutput, fetchUserAttributes } from 'aws-amplify/auth';
import { v5 as uuidv5 } from 'uuid';

// アプリケーション用に一意の名前空間を定義
const UUID_NAMESPACE = '1b671a64-40d5-491e-99b0-da01ff1f3341';

const client = generateClient<Schema>();

// ユーザー属性を取得するカスタムフック
function useUserAttributes() {
  const [userAttributes, setUserAttributes] = useState<FetchUserAttributesOutput>();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchAttributes = async () => {
      try {
        const result = await fetchUserAttributes();
        setUserAttributes(result);
      } catch (error) {
        console.error('ユーザー属性の取得に失敗しました:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchAttributes();
  }, []);

  return { userAttributes, loading };
}

function App() {
  const { user, signOut } = useAuthenticator();
  const [todos, setTodos] = useState<Array<Schema["Todo"]["type"]>>([]);
  // カスタムフックを使用してユーザー属性を取得
  const { userAttributes, loading: userLoading } = useUserAttributes();

  useEffect(() => {
    const fetchTodoList = async () => {
      const response = await client.models.Todo.list();
      setTodos([...response.data]);
    }

    fetchTodoList();

    const createSub = client.models.Todo.onCreate().subscribe({
      next: (data) => {
        setTodos((prev) => [...prev, data]);
      }
    });

    const deleteSub = client.models.Todo.onDelete().subscribe({
      next: (data) => {
        // 複合キーに基づいて削除されたTodoをフィルタリング
        setTodos((prev) => prev.filter((todo) =>
          !(todo.mailAddress === data.mailAddress && todo.uuid === data.uuid)
        ));
      }
    });
    return () => {
      createSub.unsubscribe();
      deleteSub.unsubscribe();
    }
  }, []);

  async function createTodo() {
    if (!userAttributes?.email) return;

    const mailAddress = userAttributes.email;
    const content = window.prompt("Todo content") || "";
    const uuid = uuidv5(`${mailAddress}:${content}`, UUID_NAMESPACE);

    await client.models.Todo.create({
      mailAddress: mailAddress,
      content: content,
      uuid: uuid
    });
  }

  function deleteTodo(mailAddress: string, uuid: string) {
    client.models.Todo.delete({
      mailAddress: mailAddress,
      uuid: uuid
    });
  }

  if (userLoading) {
    return (
      <div className="loader-container">
        <Loader size="large" />
      </div>
    );
  }

  return (
    <main>
      <h1>{user?.signInDetails?.loginId}'s todos</h1>
      <button onClick={createTodo}>+ new</button>
      <ul>
        {todos.map((todo) => (
          <li
            onClick={() => deleteTodo(todo.mailAddress, todo.uuid)}
            key={`${todo.mailAddress}-${todo.uuid}`}
          >
            {todo.content}
          </li>
        ))}
      </ul>
      <div>
        🥳 App successfully hosted. Try creating a new todo.
        <br />
        <a href="https://docs.amplify.aws/react/start/quickstart/#make-frontend-updates">
          Review next step of this tutorial.
        </a>
      </div>
      <button onClick={signOut}>Sign out</button>
    </main>
  );
}

export default App;