Завершение onSubmit для создания мутации GraphQL

Я просто пытаюсь завершить мутацию, чтобы можно было добавить отзыв. Компонент graphql работает, когда я использую запросы GraphQL, но я не могу заставить его работать в интерфейсе с React. интересно, что мне не хватает. Я знаю, что мне нужно сделать что-то еще с методом onSubmit в области формы, но я продолжаю получать ошибки.

Я создал функцию submitCreateReview, но я просто получаю сообщения об ошибках на стороне graphql, которые

[GraphQL error]: Message: Variable "$author" of required type "String!" was not provided., Location: [object Object], Path: undefined

index.js:63 [GraphQL error]: Message: Variable "$rating" of required type "Int!" was not provided., Location: [object Object], Path: undefined
index.js:63 [GraphQL error]: Message: Variable "$comment" of required type "String!" was not provided., Location: [object Object], Path: undefined
index.js:68 [Network error]: Error: Response not successful: Received status code 400

Я использую этот руководство для помощи, но ничего не добился:

class CreateReview extends Component {

    constructor(props){
    super(props)

    this.state = {
        author: '',
        rating: '',
        comment: ''
    };
}

submitCreateReview(e){
    e.preventDefault();
    this.props.onCreateReview({
        variables: {
            author: this.state.author,
            rating: this.state.rating,
            comment: this.state.comment
        }
    });
}
render() {
    return <div className = "create-review">
        <h3>Write a Review</h3>
        <form onSubmit = {this.submitCreateReview.bind(this)}
            }}>
            <label>Rate Your Experience</label>
            <div className = "create-review__stars">
                <input id = "_create_review_ratings"
                    value = {this.props.rating}
                    onChange = {(e) => this.setState({ rating: e.target.value})} /><StarIcon />
            </div>
            <label htmlFor = "create-review__author">Author</label>
            <input
                id = "create-review__author"
                value = {this.props.author}
                onChange = {(e) => this.setState({author: e.target.value})}
                 />
            <label htmlFor = "create-review__comment">Review</label>
            <textarea
                id = "create-review__comment"
                value = {this.props.comment}
                onChange = {(e) => this.setState({comment: e.target.value})}
                />
            <button>Add Review</button>
        </form>
    </div>;
 }
}

const createReviewMutation = gql`
mutation createReview(
    $author: String!,
    $rating: Int!,
    $comment: String!,
) {
    createReview(
        author: $author
        rating: $rating
        comment: $comment
    ) {
        id
        rating
        author
        comment
        created_at
    }
}
`;


 export default function CreateReviewHOC(props) {
  return <Mutation
    mutation = {createReviewMutation}
    update = {(cache, { data: { createReview } }) => {
        const { reviews } = cache.readQuery({ query: props.getReviewsQuery });
        cache.writeQuery({
            query: props.getReviewsQuery,
            data: { reviews: [createReview].concat(reviews) }
        });
    }}
>
    {(submitCreateReview, { data }) => (
        <CreateReview
            {...props}
            onCreateReview = {variables => submitCreateReview({ variables })}
        />
    )}
</Mutation>;
}