Apollo:数据/变异道具未传递给组件 [英] Apollo: data / mutation prop not passed to component

问题描述

我有以下带有查询和变更的组件，但我的组件没有收到数据和变更道具.

I have the following component with a query and a mutation, but my Component does not receive the data and the mutation prop.

我在代码中做错了什么或遗漏了什么吗?查询确实被执行了，只是没有传递下去.this.props.mutate 和 this.props.data 是未定义的.

Am I doing something wrong or missing in my code? The query does get executed though, it's just not passed down. this.props.mutate as well as this.props.data is undefined.

class ResetConfirm extends React.Component {
  static propTypes = {
    intl: intlShape.isRequired,
    token: React.PropTypes.string,
    data: React.PropTypes.shape({
      loading: React.PropTypes.bool.isRequired,
      checkToken: React.PropTypes.array,
    }).isRequired,
    mutate: React.PropTypes.func.isRequired,
  }

  submitForm = (model) => {
    this.setState({
      loading: true,
    });

    this.props.mutate({ variables: { password: model.password, token: this.props.token } })
      .then(({ data }) => {
        // redirect
      }).catch((error) => {
        console.log('there was an error sending the query', error);
      });
  }
  render() {
       //render jsx
  }
}

const CheckTokenQuery = gql`
  query CheckToken($token: String!) {
    checkToken(token: $token) {
      response
    }
  }
`;

const SetNewPasswordMutation = gql`
  mutation SetNewPasswordMutation($password: String!, $token: String!) {
    resetPassword(password: $password, token: $token) {
      response
    }
  }
`;

export default graphql(SetNewPasswordMutation, { name: SetNewPasswordMutation })(
  graphql(CheckTokenQuery, { name: CheckTokenQuery, forceFetch: true })(injectIntl(connect(ResetConfirm)))
);

推荐答案

您已使用 name 来命名变异道具 SetNewPasswordMutation.

You have used name to name the mutation prop SetNewPasswordMutation.

这意味着您需要从您的组件中调用它，例如:

This means that you need to call it from your component like:

this.props.SetNewPasswordMutation(
  { variables: { password: model.password, token: this.props.token } })

这篇关于Apollo:数据/变异道具未传递给组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！