フルスタックTodoアプリを作る⑤ -useSWRを使用する-

useSWRでキャッシュ化されたデータフェッチングと、mutateを利用することで、フロントエンドでの編集、バックエンドも含めたリアルタイムの更新が可能になった。

const { data, isLoading, error, mutate } = useSWR(
"http://localhost:8080/allTodos",
fetcher
);

const handleEdit = async () => {
setIsEditing(!isEditing);
if (isEditing) {
const response = await fetch(
http://localhost:8080/editTodo/${todo.id}, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(
{ title: editedTitle }
　　　　　　　　　　　),
});

    if (response.ok) {
        const editedTodo = await response.json();
        mutate([...data, editedTodo]);
        setEditedTitle("");
    }
 }

};

return (
<label className="ml-3 block text-gray-900">
{isEditing ? (
<input
　type="text"
　className="border rounded py-1 px-2"
　value={editedTitle}
　　　onChange={(e) => setEditedTitle(e.target.value)}
/>
) : (
　　　　　　　　<span className="text-lg font-medium mr-2">　
{todo.title}
　　　　　　　　</span>
)}
</label>

フロントエンド

データベース