简体   繁体   中英

passing state to getVaribles Mutation in Relay

how do you pass state like this.state.username;, this.state.password; to Relay.Mutation{get variables /config} where this.state.username and this.state.password are mapped to input values from text fields which make the loginMutation {this.state} to return null all examples in relay seem to be one sided (creating queries) where i have Login Component and Login Mutation here are my files

//loginMutation named as verifyMutation.js
import Relay from 'react-relay';

class VerifyMutation extends Relay.Mutation {

  getMutation() {
    return Relay.QL`
      mutation { mpesaVerify }
    `;
  }

  getVariables() {
    return {
      phoneNumber: this.state.username,//this.state return null
      transactionID: this.state.password//this.state retuns null
    };
  }

  getFatQuery() {
    return Relay.QL`
      fragment on verificationPayload {
        featureEdge,
        viewer { features }
      }
    `;
  }

  getConfigs() {
    return [{
      type: 'RANGE_ADD',
      parentName: 'viewer',
      parentID: this.props.viewerId,
      connectionName: 'features',
      edgeName: 'featureEdge',
      rangeBehaviors: {
        '': 'append',
      },
    }];
  }
}

export default VerifyMutation;

and loginComponent here

//loginComponent.js
import React from 'react';
import Relay from 'react-relay';

import { Grid, Cell, Button, Textfield } from 'react-mdl';

import  VerifyMutation from './VerifyMutation';

import Page from '../Page/PageComponent';
import info from './infoComponent';

import styles from './Verify.scss';



export default class Verify extends React.Component {

  static propTypes = {
    viewer: React.PropTypes.object.isRequired
  };

  constructor (props){
    super(props);
    this.state =  {username:'',password:''}
  };

  onUsernameChange(e){
    this.setState({username:e.target.value});
  };
  onPasswordChange (e){
    this.setState({password:e.target.value});
  };

  handleSubmit = (e)=>{
    e.preventDefault();
    //enter relay world
    const verifyMutation = new VerifyMutation({viewerId:this.props.viewer.id, ...this.state});
    Relay.Store.commitUpdate(verifyMutation, {onError: err => console.error.bind(console,err)});

  }



  render() {

    return (

      <div>
        <Page heading='Verify Payments'>
          <Grid>
            <Cell col={4}>
              <h3>How to go about it</h3>
              <p>
                username: {this.state.username} and
                password: {this.state.password}
              </p>
            </Cell>
            <Cell col={4}>
              /*if verified show results here instead of this */
              <form  onSubmit={this.handleSubmit.bind(this)} >
                <Textfield
                  value={this.state.username}
                onChange={this.onUsername.bind(this)}
                error="username please"
                label="username."
                error="please use valid username"
                required={true}
                style={{width: '200px'}}/>
                <Textfield
                  value={this.state.username}
                  onChange={this.onUsernameChange.bind(this)}
                  pattern="[A-Z0-9]{7,10}"
                  error="should be 7 to 10 letters"
                  label="password"
                  required={true}
                  style={{width: '200px'}}
                />
                <input type="hidden" value={this.props.viewer.id} />
                <Button raised colored >Verify</Button>
              </form>
            </Cell>
            <Cell col={4}>
            </Cell>
          </Grid>
        </Page>
      </div>

    );

  }

}

the problem i get is that most example use props which are not the way to go about it in react since we use state for fields that change over time ie mutation anyone who thanks in advance

The only issue here is that you're referencing state in the mutation itself. You're passing through the component's state as props to the mutation - this is exactly the same as if you were passing state as props to child components.

So to fix the issue, all you should need to to is change the use of state to props in your getVariables method.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM