我找不到正确的答案。所以我希望有人能帮助我。我想在我的导出默认值中包含两个突变。但是我不知道解决这个问题的正确方法。
当前代码:
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消失,而anvraagmutation不执行任何操作。我怎样才能使他们两个都被执行?
答案 0 :(得分:2)
graphql
函数会创建一个高阶组件,默认情况下会注入一个名为mutate
的道具来运行您的查询。
在您的代码中,由graphql(projectmutation)
创建的高阶分量正在覆盖mutate
创建的HOC注入的graphql(aanvraagmutation)
道具。
为避免这种情况,您需要让graphql
生成一个具有其他名称的道具,使用config.name
选项将默认的mutate
名称更改为其他名称,以便他们不会发生冲突。例如:
export default compose(
graphql(aanvraagmutation, { name: 'aanvraagmutate' }),
graphql(projectmutation, { name: 'projectmutate' }),
)(Aanvraag);
(我还使用compose
来整理内容)。
然后,您在处理程序中分别将每个突变 调用。 HOCS不会结合在一起创建单个变异查询。