阿波罗：多重突变

Posted 2023-03-10

【中文标题】阿波罗：多重突变

【英文标题】：Apollo: Multiple mutations

【发布时间】：2019-04-02 03:39:24

【问题描述】：

我找不到正确的答案。所以我希望有人能帮助我。我想在我的导出默认值中有两个突变。但我不知道解决这个问题的正确方法。

当前代码：

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 什么也不做。我怎样才能做到让他们两个都被执行？

【参考方案1】：

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 不会组合起来创建单个 mutate 查询。

【讨论】：

如果我这样做，我会得到这个错误：this.props.mutate is not a function

那是因为它不再叫mutate了！现在有两个道具，一个叫aanvraagmutate，一个叫projectmutate。