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.