React-Apollo-Hooks используют мутацию, передавая пустые переменные? - PullRequest
Новая
       20

React-Apollo-Hooks используют мутацию, передавая пустые переменные?

0 голосов
/ 09 марта 2020

Я пытаюсь создать мутацию addBook, но когда я отправляю форму и вызываю мутацию, создается книга с пустыми строками в качестве имени, жанра и authorID.

Я могу запустить мутация в 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 Ответ

1 голос
/ 10 марта 2020

Сначала добавьте объявление переменных в мутацию 

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