2024年Web前端最新React+Ts+Node+MongoDB 构建 Todo App项目总结，看完老板就给加薪了

在第一部分的基础上，我们将继续构建Todo应用程序，并完成其余的功能。

1. 创建一个新的Todo项

首先，我们需要在components/TodoList/NewTodo.tsx文件中添加一个表单来创建新的Todo项。

import React, { useState } from 'react';
import { useMutation } from '@apollo/client';
import { CREATE_TODO } from '../queries';
 
const NewTodo: React.FC = () => {
  const [text, setText] = useState('');
  const [createTodo] = useMutation(CREATE_TODO);
 
  const submitForm = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    createTodo({ variables: { text } });
    setText('');
  };
 
  return (
    <form onSubmit={submitForm}>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Enter new todo"
      />
      <button type="submit">Add</button>
    </form>
  );
};
 
export default NewTodo;

在上述代码中，我们使用了Apollo Client的useMutation钩子来处理创建新Todo的请求。我们还使用了React的useState钩子来管理输入字段的状态。

2. 完成Todo项

在components/TodoList/Todo.tsx文件中，我们需要添加一个按钮来标记Todo项为已完成。

import React from 'react';
import { useMutation } from '@apollo/client';
import { TOGGLE_TODO } from '../queries';
 
interface TodoProps {
  id: number;
  text: string;
  completed: boolean;
}
 
const Todo: React.FC<TodoProps> = ({ id, text, completed }) => {
  const [toggleTodo] = useMutation(TOGGLE_TODO, {
    variables: { id },
    refetchQueries: [{ query: ALL_TODOS }], // 假设ALL_TODOS是获取所有Todos的查询
  });
 
  return (
    <li onClick={toggleTodo}>
      {text}
    </li>
  );
};
 
export default Todo;

在上述代码中，我们使用了useMutation钩子来处理标记Todo为已完成的请求。

3. 删除Todo项

在components/TodoList/Todo.tsx文件中，我们需要添加一个按钮来删除Todo项。

import React from 'react';
import { useMutation } from '@apollo/client';
import { DELETE_TODO } from '../queries';
 
interface TodoProps {
  id: number;
  text: string;
  completed: boolean;
}
 
const Todo: React.FC<TodoProps> = ({ id, text, completed }) => {
  const [deleteTodo] = useMutation(DELETE_TODO, {
    variables: { id },
    refetchQueries: [{ query: ALL_TODOS }], // 假设ALL_TODOS是获取所有Todos的查询
  });
 
  return (
    <li>
      {text}
      <button onClick={deleteTodo}>X</button>
    </li>
  );
};
 
export default Todo;

在上述代码中，我们使用了useMutation钩子来处理删除Todo的请求。

4. 清除已完成的Todo项

在components/TodoList/Footer.tsx文件中，我们