在第一部分的基础上，我们将继续构建Todo应用程序，并完成其余的功能。
- 创建一个新的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钩子来管理输入字段的状态。
- 完成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为已完成的请求。
- 删除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的请求。
- 清除已完成的Todo项
在components/TodoList/Footer.tsx文件中，我们