阿波罗:多重突变
Apollo: Multiple mutations
我找不到正确的答案。所以我希望有人能帮助我。我想在我的导出默认值中有两个突变。但我不知道解决这个问题的正确方法。
当前代码:
import React from 'react';
import gql from 'graphql-tag';
import {graphql,compose} from 'react-apollo';
import AanvraagFromulier from './AanvraagFormulier';
export class Aanvraag extends React.Component{
onSubmit = (aanvraag) => {
console.log(aanvraag);
this.props.mutate({
variables: {
id: aanvraag.id,
naam: aanvraag.naam,
email: aanvraag.email,
afdeling: aanvraag.afdeling,
divisie: aanvraag.divisie,
team: aanvraag.team,
status: 'open',
//project vars
projectid: aanvraag.projectid,
projectnaam: aanvraag.projectnaam,
projecttype: aanvraag.ptype,
projectlead_naam: aanvraag.pjnaam,
projectlead_email:aanvraag.pjemail,
aanvraag_id:aanvraag.id
},
});
}
render(){
console.log(this.props);
return(
<div>
<AanvraagFromulier
onSubmit={this.onSubmit}
/>
</div>
);
}
}
const aanvraagmutation = gql`
mutation addAanvraag($id:ID, $naam:String,$email:String,$divisie:String,$afdeling:String,$team:String,$status:String){
addAanvraag(id:$id, naam:$naam,email:$email,divisie:$divisie,afdeling:$afdeling,team:$team,status:$status){
id
}
}
`;
const projectmutation = gql`
mutation addProject($projectid:ID,$projectnaam:String,$projecttype:String,$projectlead_naam:String,$projectlead_email:String,$aanvraag_id:ID){
addProject(id:$projectid, naam:$projectnaam,type:$projecttype,lead_naam:$projectlead_naam,lead_email:$projectlead_email,aanvraag_id:$aanvraag_id){
id
}
}
`;
export default graphql(aanvraagmutation)(graphql(projectmutation)(Aanvraag))
问题是当执行这个文件时只有 projectmutation 关闭而 aanvraagmutation 什么都不做。我怎样才能让他们都被处决?
graphql
函数创建一个高阶组件,默认情况下,它会注入一个名为 mutate
的 prop 来运行您的查询。
在您的代码中,由 graphql(projectmutation)
创建的高阶组件正在覆盖由 graphql(aanvraagmutation)
创建的 HOC 注入的 mutate
道具。
为了避免这种情况,您需要告诉 graphql
生成一个具有另一个名称的道具,使用 config.name
选项将默认的 mutate
名称更改为其他名称,以免他们发生冲突。例如:
export default compose(
graphql(aanvraagmutation, { name: 'aanvraagmutate' }),
graphql(projectmutation, { name: 'projectmutate' }),
)(Aanvraag);
(我也用 compose
来整理)。
然后您在处理程序中分别调用每个突变。 HOCS 不会合并创建单个变异查询。
我找不到正确的答案。所以我希望有人能帮助我。我想在我的导出默认值中有两个突变。但我不知道解决这个问题的正确方法。
当前代码:
import React from 'react';
import gql from 'graphql-tag';
import {graphql,compose} from 'react-apollo';
import AanvraagFromulier from './AanvraagFormulier';
export class Aanvraag extends React.Component{
onSubmit = (aanvraag) => {
console.log(aanvraag);
this.props.mutate({
variables: {
id: aanvraag.id,
naam: aanvraag.naam,
email: aanvraag.email,
afdeling: aanvraag.afdeling,
divisie: aanvraag.divisie,
team: aanvraag.team,
status: 'open',
//project vars
projectid: aanvraag.projectid,
projectnaam: aanvraag.projectnaam,
projecttype: aanvraag.ptype,
projectlead_naam: aanvraag.pjnaam,
projectlead_email:aanvraag.pjemail,
aanvraag_id:aanvraag.id
},
});
}
render(){
console.log(this.props);
return(
<div>
<AanvraagFromulier
onSubmit={this.onSubmit}
/>
</div>
);
}
}
const aanvraagmutation = gql`
mutation addAanvraag($id:ID, $naam:String,$email:String,$divisie:String,$afdeling:String,$team:String,$status:String){
addAanvraag(id:$id, naam:$naam,email:$email,divisie:$divisie,afdeling:$afdeling,team:$team,status:$status){
id
}
}
`;
const projectmutation = gql`
mutation addProject($projectid:ID,$projectnaam:String,$projecttype:String,$projectlead_naam:String,$projectlead_email:String,$aanvraag_id:ID){
addProject(id:$projectid, naam:$projectnaam,type:$projecttype,lead_naam:$projectlead_naam,lead_email:$projectlead_email,aanvraag_id:$aanvraag_id){
id
}
}
`;
export default graphql(aanvraagmutation)(graphql(projectmutation)(Aanvraag))
问题是当执行这个文件时只有 projectmutation 关闭而 aanvraagmutation 什么都不做。我怎样才能让他们都被处决?
graphql
函数创建一个高阶组件,默认情况下,它会注入一个名为 mutate
的 prop 来运行您的查询。
在您的代码中,由 graphql(projectmutation)
创建的高阶组件正在覆盖由 graphql(aanvraagmutation)
创建的 HOC 注入的 mutate
道具。
为了避免这种情况,您需要告诉 graphql
生成一个具有另一个名称的道具,使用 config.name
选项将默认的 mutate
名称更改为其他名称,以免他们发生冲突。例如:
export default compose(
graphql(aanvraagmutation, { name: 'aanvraagmutate' }),
graphql(projectmutation, { name: 'projectmutate' }),
)(Aanvraag);
(我也用 compose
来整理)。
然后您在处理程序中分别调用每个突变。 HOCS 不会合并创建单个变异查询。