React-Apollo-Hooks useMutation passing empty variables? - reactjs

Question

I am trying to create an addBook mutation, but when I submit the form and call the mutation, a book is created with empty strings as the name, the genre and the authorID.
I can run the mutation in GraphiQL and it works correctly so I think that means the problem is in the component.
I'm not sure what is wrong?
Mutation:
const addBookMutation = gql`
mutation {
addBook(name: "", genre: "", authorID: "") {
id
name
}
}
`;
Component:
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>
);
}

Answer 1

First add the variables declaration to mutation
const addBookMutation = gql`
mutation AddBook($name: String!, $genre: String!, $authorID: String!){
addBook(name: $name, genre: $genre, authorID: $authorID) {
id
name
}
}
`;
Then pass the variables to the mutation as are declared
...
e.preventDefault();
addBook({
variables: { name, genre, authorID },
});
...