React-Apollo-Hooks 使用Mutation 传递空变量？

Posted 2023-03-10

【中文标题】React-Apollo-Hooks 使用Mutation 传递空变量？

【英文标题】：React-Apollo-Hooks useMutation passing empty variables?

【发布时间】：2020-06-21 18:54:01

【问题描述】：

我正在尝试创建 addBook 突变，但是当我提交表单并调用突变时，会创建一本书，其中包含空字符串作为名称、流派和作者 ID。

我可以在 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>
    );

【问题讨论】：

我已阅读文档并尝试以几种不同的方式连接突变。我仍然很困惑，这就是我在这里寻求帮助的原因。

好的，我会添加一个答案，但我看到的是你没有声明也没有将变量传递给突变

【参考方案1】：

首先将变量声明添加到突变中

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 ,
);
...