ApolloClient设置中的Apollo React - `useMutation`？

import React from 'react';
import { useMutation, gql } from '@apollo/client';

const ADD_TODO = gql`
  mutation AddTodo($title: String!) {
    addTodo(title: $title) {
      id
      title
    }
  }
`;

function TodoForm() {
  const [addTodo, { data, loading, error }] = useMutation(ADD_TODO);

  const handleSubmit = (event) => {
    event.preventDefault();
    const title = event.target.elements.title.value;
    addTodo({ variables: { title } });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="title" placeholder="Add Todo" />
      <button type="submit" disabled={loading}>
        {loading ? 'Adding...' : 'Add Todo'}
      </button>
      {error && <p>Error: {error.message}</p>}
      {data && <p>Added: {data.addTodo.title}</p>}
    </form>
  );
}

export default TodoForm;