如何触发突变,react + Apollo 2.1
How to Trigger a Mutation, react + Apollo 2.1
我有一个点击按钮时触发的突变,returns 结果。现在我很想在收到该结果时触发另一个突变,并在下一个突变中使用该结果。
所以基本上..
- 点击时调用突变。
- 突变产生结果。
- 收集结果。
- 根据收集到的结果,使用该结果触发另一个突变。
这方面的任何示例都会有很大帮助。
这是我目前所拥有的
_renderSubmitButton = () => {
const { firstName, lastName, email, dateOfBirth, phone } = this.state.fields;
const { isSaving } = this.state
return (
<Mutation
mutation={CREATE_PERSON_MUTATION}
refetchQueries={() => [{ query: PERSON_QUERY }]}
onCompleted={this._handleServerResponse}
onError={this._handleServerError}
>
{
(createPerson, { loading, data, error } ) => { return (
<Button
primary
disabled={!(firstName && lastName && dateOfBirth && email && !_.isEmpty(phone.number) && !_.isEmpty(phone.type))}
onClick={() => this._submit({ createPerson, data, error, loading })}
loading={this.state.isSaving}
>
Save <Icon name='right chevron' style={style.iconPad} />
</Button>
)
}
}
</Mutation>
)
}
_submit = async ({ createPerson, data, error, loading }) => {
this.setState((prevState) => ({ isSaving: true }));
const person = this._buildPersonData();
createPerson({ variables: { person } })
.then((resp) => {
console.log(resp.data.createPerson.personID);
if(resp.data.createPerson.personID){
this.setState({
gottenID: true,
accessID: resp.data.createPerson.personID
});
}
})
//TRIGGER ANOTHER MUTATION
};
您可以连接或组合它们,检查 this library!
实际上,组合它们,你可以这样做:
const handleClick = async (mutation1Fn, mutation2Fn) => {
const data1 = await mutation1Fn()
const data2 = await mutation2Fn()
}
const Mutations = () => (
<Composer
components={[
<Mutation mutation={mutation1} />,
<Mutation mutation={mutation2} />
]}
>
{([mutation1Fn, mutation2Fn]) => (
<button
onClick={() => handleClick(mutation1Fn, mutation2Fn)}
>
exec!
</button>
)}
</Composer>
)
如果您遇到困难,请告诉我!
我有一个点击按钮时触发的突变,returns 结果。现在我很想在收到该结果时触发另一个突变,并在下一个突变中使用该结果。
所以基本上..
- 点击时调用突变。
- 突变产生结果。
- 收集结果。
- 根据收集到的结果,使用该结果触发另一个突变。
这方面的任何示例都会有很大帮助。
这是我目前所拥有的
_renderSubmitButton = () => {
const { firstName, lastName, email, dateOfBirth, phone } = this.state.fields;
const { isSaving } = this.state
return (
<Mutation
mutation={CREATE_PERSON_MUTATION}
refetchQueries={() => [{ query: PERSON_QUERY }]}
onCompleted={this._handleServerResponse}
onError={this._handleServerError}
>
{
(createPerson, { loading, data, error } ) => { return (
<Button
primary
disabled={!(firstName && lastName && dateOfBirth && email && !_.isEmpty(phone.number) && !_.isEmpty(phone.type))}
onClick={() => this._submit({ createPerson, data, error, loading })}
loading={this.state.isSaving}
>
Save <Icon name='right chevron' style={style.iconPad} />
</Button>
)
}
}
</Mutation>
)
}
_submit = async ({ createPerson, data, error, loading }) => {
this.setState((prevState) => ({ isSaving: true }));
const person = this._buildPersonData();
createPerson({ variables: { person } })
.then((resp) => {
console.log(resp.data.createPerson.personID);
if(resp.data.createPerson.personID){
this.setState({
gottenID: true,
accessID: resp.data.createPerson.personID
});
}
})
//TRIGGER ANOTHER MUTATION
};
您可以连接或组合它们,检查 this library!
实际上,组合它们,你可以这样做:
const handleClick = async (mutation1Fn, mutation2Fn) => {
const data1 = await mutation1Fn()
const data2 = await mutation2Fn()
}
const Mutations = () => (
<Composer
components={[
<Mutation mutation={mutation1} />,
<Mutation mutation={mutation2} />
]}
>
{([mutation1Fn, mutation2Fn]) => (
<button
onClick={() => handleClick(mutation1Fn, mutation2Fn)}
>
exec!
</button>
)}
</Composer>
)
如果您遇到困难,请告诉我!