React Apollo GraphQL突变返回400（错误请求）

Question

所有和任何建议将非常感谢！谢谢你！

1. 发布http：//localhost:3000/GraphQL 400（错误请求）[GraphQL错误]:消息：变量“$email”未定义。，位置：[object object]，[object object]，路径：未定义
2. [GraphQL错误]:消息：变量“$LocationCity”未定义。，位置：[object object]，[object object]，路径：未定义
3. [GraphQL错误]:消息：变量“$LocationState”未定义。，位置：[object object]，[object object]，路径：未定义
4. [GraphQL错误]:消息：变量“$LocationCountry”未定义。，位置：[object object]，[object object]，路径：未定义
5. [GraphQL错误]:消息：变量“$interests”未定义。，位置：[object object]，[object object]，路径：未定义
6. [网络错误]:服务器错误：响应未成功：已接收状态代码400

在我的schema.js中，我有以下内容：

editOtherProfileDetails: async (root, { email, locationCity, locationState, locationCountry, interests }, { User }) => {

      const user = await User.findOneAndUpdate({ email }, 
        { $set: { locationCity: locationCity } }, 
        { $set: { locationState: locationState } }, 
        { $set: { locationCountry: locationCountry } }, 
        { $set: { interests: interests } }, 
        { new: true }
      );

      if (!user) {
        throw new Error('User Not Found');
      }

      return user;
    },

export const EDIT_OTHER_PROFILE_DETAILS = gql`
    mutation($locationCountry: String!){
        editOtherProfileDetails(email: $email, locationCity: $locationCity, locationState: $locationState, locationCountry: $locationCountry, interests: $interests){
            email
            locationCity
            locationState
            locationCountry
            interests
        }
    }
`;

在我的EditProfile.js中，我有以下内容：

    import React, { Fragment } from 'react';
    import { Mutation } from 'react-apollo';
    import {GET_USER_PROFILE, EDIT_OTHER_PROFILE_DETAILS, PROFILE_PAGE } from './../../queries';
    import { withRouter } from 'react-router-dom';
    import toastr from 'toastr';

    const initialState = {
      locationCity: '',
      locationState: '',
      locationCountry: '',
      interests: '',
      error: ''
    }

    class EditOtherProfileMutations extends React.Component {

      constructor(props) {
        super(props);
        this.state = {
          locationCity: '',
          locationState: '',
          locationCountry: '',
          interests: '',
          error: ''
        }
      }

      componentDidMount() {
        if (this.props.profile) {
          this.setState({
            locationCity: this.props.profile.locationCity,
            locationState: this.props.profile.locationState,
            locationCountry: this.props.profile.locationCountry,
            interests: this.props.profile.interests
          });
        }
        toastr.options = {
          "closeButton": false,
          "debug": false,
          "newestOnTop": true,
          "progressBar": true,
          "positionClass": "toast-bottom-right",
          "preventDuplicates": false,
          "onclick": null,
          "showDuration": "300",
          "hideDuration": "1000",
          "timeOut": "5000",
          "extendedTimeOut": "1000",
          "showEasing": "swing",
          "hideEasing": "linear",
          "showMethod": "fadeIn",
          "hideMethod": "fadeOut"
        }
      }

      handleChange(event) {
        const name = event.target.name;
        const value = event.target.value;
        this.setState({
          [name]: value.charAt(0).toUpperCase() + value.substr(1).toLowerCase()
        });
      }

      handleSubmit(event, editOtherProfileDetails) {
        event.preventDefault();
        editOtherProfileDetails().then(async () => {
          toastr.success('We have updated your details!', 'Saved!');
        }).catch(error => {
          this.setState({
            error: error.graphQLErrors.map(x => x.message)
          })
          // console.error("ERR =>", error.graphQLErrors.map(x => x.message));
        });
      }

      render() {

        const {  locationCity, locationState, locationCountry, interests } = this.state
        const userName = this.props.session.getCurrentUser.userName;
        this.state;

        return (
          <Fragment>

            <Mutation
              mutation={EDIT_OTHER_PROFILE_DETAILS}
              variables={{ email: this.props.session.getCurrentUser.email, locationCity, locationState, locationCountry, interests }}
              refetchQueries={() => [
                { query: GET_USER_PROFILE },
                { query: PROFILE_PAGE, variables: { userName } }
              ]}>

              {/* eslint-disable */}
              {(editOtherProfileDetails, { data, loading, error }) => {
              /* eslint-enable */

                return (

                  <form className="form" onSubmit={event => this.handleSubmit(event, editOtherProfileDetails)}>

                    <div className="form_wrap">



                      <div className="form_row">

                        <div className="form_item">
                          <div className="form_input">
                            <span className="edit_profile_span">City</span>
                            <input type="text" name="locationCity" placeholder="City" value={locationCity} style={{ textTransform: "capitalize"}} onChange={this.handleChange.bind(this)}/>
                            <span className="bottom_border"></span>
                          </div>
                        </div>

                      </div>

                      <div className="form_row">

                        <div className="form_item">
                          <div className="form_input">
                            <span className="edit_profile_span">State</span>
                            <input type="text" name="locationState" placeholder="State" value={locationState} style={{ textTransform: "capitalize"}} onChange={this.handleChange.bind(this)}/>
                            <span className="bottom_border"></span>
                          </div>
                        </div>

                      </div>

                      <div className="form_row">

                        <div className="form_item">
                          <div className="form_input">
                            <span className="edit_profile_span">Country</span>
                            <input type="text" name="locationCountry" placeholder="Country" value={locationCountry} style={{ textTransform: "capitalize"}} onChange={this.handleChange.bind(this)}/>
                            <span className="bottom_border"></span>
                          </div>
                        </div>

                      </div>

                      <div className="form_row">

                        <div className="form_item">
                          <div className="form_input">
                            <span className="edit_profile_span">Interests</span>
                            <input type="text" name="interests" placeholder="Interests (e.g Sports, Wine, Outdoors ect.)" value={interests} style={{ textTransform: "capitalize"}} onChange={this.handleChange.bind(this)}/>
                            <span className="bottom_border"></span>
                          </div>
                        </div>

                      </div>

                      <div className="form_buttons">
                        <button type="submit" className="btn">
                        Save changes</button>
                      </div>

                    </div>

                  </form>

                );
              }}

            </Mutation>

          </Fragment>
        )
      }
    }

    export default withRouter(EditOtherProfileMutations);

Answer 1

我认为问题是你的变异输入字段和你的模式中定义的不一样。

您的架构具有：

editOtherProfileDetails(
 email: String!, 
 locationCity: String!, 
 locationState: String!, 
 locationCountry: String!, 
 interests: String!
): User

并且您定义了您的突变,如下所示：

mutation($locationCountry: String!){ ... }

mutation NameOfYourMutation(
 $email: String!, 
 $locationCity: String!, 
 $locationState: String!, 
 $locationCountry: String!, 
 $interests: String!
) { ... }

而且，正如您可能预料到的，这将慢慢变得难以维持。我建议看一下输入对象。