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;