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 })}？

完成onSubmit以创建GraphQL突变

1 个答案: