Reactjs 阿波罗通过传递空变量做出反应？

我试图创建一个addBook变体，但是当我提交表单并调用变体时，一本书的名称、类型和作者都是空字符串

我可以在GraphiQL中运行突变，它工作正常，所以我认为这意味着问题出在组件中

我不知道怎么了

---

突变：

const addBookMutation = gql`
    mutation {
        addBook(name: "", genre: "", authorID: "") {
            id
            name
        }
    }
`;

组成部分：

import React, { useState } from 'react';
import { useQuery, useMutation } from '@apollo/react-hooks';
import { getAuthorsQuery, addBookMutation } from '../queries/queries';

export default function AddBook() {
    const { loading, error, data } = useQuery(getAuthorsQuery);

    const [name, setName] = useState('');
    const [genre, setGenre] = useState('');
    const [authorID, setAuthorID] = useState('');

    const [addBook, { data: bookData }] = useMutation(addBookMutation);
    let authors = [];

    if (error) return <p>Error :(</p>;
    if (data) {
        authors = data.authors;
    }

    return (
        <div>
            <form
                className="bg-blue-900 p-4 flex flex-1 flex-wrap"
                onSubmit={e => {
                    e.preventDefault();
                    addBook({
                        bookData: { name, genre, authorID },
                    });
                }}
            >
                <label className="font-semibold text-gray-100">Book Name</label>
                <input
                    type="text"
                    className="py-1 px-2 rounded border mx-2"
                    onChange={e => setName(e.target.value)}
                />

                <label className="font-semibold text-gray-100">Genre</label>
                <input
                    type="text"
                    className="py-1 px-2 rounded border mx-2"
                    onChange={e => setGenre(e.target.value)}
                />

                <label className="font-semibold text-gray-100">Author</label>
                <select
                    className="py-1 px-2 rounded border mx-2"
                    onChange={e => setAuthorID(e.target.value)}
                >
                    {loading ? <option>Loading authors...</option> : ''}
                    <option defaultValue>Select Author</option>
                    {authors.map(author => (
                        <option key={author.id} value={author.id}>
                            {author.name}
                        </option>
                    ))}
                </select>
                <button
                    type="submit"
                    className="bg-gray-200 text-gray-900 font-semibold py-1 px-2 rounded"
                >
                    Add Book
                </button>
            </form>
        </div>
    );
}

import React，{useState}来自“React”；
从“@apollo/react hooks”导入{useQuery，useVaritation}；
从“../queries/queries”导入{getAuthorsQuery，addBookMutation}；
导出默认函数AddBook（）{
const{loading，error，data}=useQuery（getAuthorsQuery）；
const[name，setName]=useState（“”）；
const[genre，setGenre]=useState（“”）；
const[authorID，setAuthorID]=useState（“”）；
const[addBook，{data:bookData}]=useMutation（addBookMutation）；
让作者=[]；
if（error）返回错误：（
；
如果（数据）{
作者=数据作者；
}
返回(
{
e、 预防默认值（）；
地址簿({
bookData:{名称、流派、作者}，
});
}}
>
书名
setName（e.target.value）}
/>
体裁
setgreen（e.target.value）}
/>
作者
setAuthorID（e.target.value）}
>
{正在加载？正在加载作者…：''}
选择作者
{authors.map（author=>(
{author.name}
))}
添加书本
);
}

首先将变量声明添加到

const addBookMutation = gql`
    mutation AddBook($name: String!, $genre: String!, $authorID: String!){
        addBook(name: $name, genre: $genre, authorID: $authorID) {
            id
            name
        }
    }
`;

然后将变量传递给声明的变异

...
e.preventDefault();
addBook({
  variables: { name, genre, authorID },
});
...

---

我已经阅读了文档，并尝试用几种不同的方式将突变联系起来。我仍然感到困惑，这就是我在这里寻求帮助的原因。好吧，我会补充一个答案，但我看到的是，你既没有声明突变，也没有向突变传递变量