完成 onSubmit 以创建 GraphQL 突变

Question

我只是在尝试完成突变以使其能够添加评论。当我使用 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

我正在使用这个tutorial 寻求帮助，但并没有真正到达任何地方：

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>;
}

Answer 1

我想你忘了提取这一行上的变量onCreateReview={variables => submitCreateReview({ variables })} 它应该是onCreateReview={({variables })=> submitCreateReview({ variables })}？