如何处理 Relay Modern 上的突变错误？

Posted 2023-03-08

【中文标题】如何处理 Relay Modern 上的突变错误？

【英文标题】：How to handle mutation errors on Relay Modern?

【发布时间】：2018-04-08 23:46:51

【问题描述】：

我正在为我的客户使用 ReactJS 和 Relay。考虑以下突变：

import 
    commitMutation,
    graphql
 from 'react-relay';

import environment from '../../../../environment';


const mutation = graphql`
    mutation CompanyMutation($company: CompanyInput!) 
        createCompany(data: $company) 
            id
        
    
`

export const createCompany = (company, callback) => 

console.log(company);

    const variables = 
        company: company
    

    commitMutation(
        environment,
        
            mutation,
            variables,
            onCompleted: () => 
                callback()
            ,
            onError: (error) => 
                throw new Error(error)
            ,
        ,
    );

如何处理从我的 GraphQLServer 发送的错误响应：

  "errors": [
    
      "message": "E11000 duplicate key error collection: mom.companies index: name_1 dup key:  : \"TEST

\" ",
      "locations": [
        
          "line": 4,
          "column": 3
        
      ],
      "stack": "WriteError(\"code\":11000,\"index\":0,\"errmsg\":\"E11000 duplicate key error collection: mom.companies index: name_1 dup key:  : \\\"RENATO\\\" \",\"op\":\"createdAt\":1509103201877,\"deleted\":false,\"name\":\"TEST\",\"ein\":\"1234\",\"test\":false,\"multiSite\":true,\"siteLimit\":10,\"enabled\":false,\"_id\":\"59f316618ba865186815d3de\",\"__v\":0)\n    at Function.MongoError.create (D:\\9. DEV\\WORKSPACE\\momejected\\node_modules\\mongodb-core\\lib\\error.js:31:11)\n    at toError (D:\\9. DEV\\WORKSPACE\\momejected\\node_modules\\mongodb\\lib\\utils.js:139:22)\n    at D:\\9. DEV\\WORKSPACE\\momejected\\node_modules\\mongodb\\lib\\collection.js:669:23\n    at handleCallback (D:\\9. DEV\\WORKSPACE\\momejected\\node_modules\\mongodb\\lib\\utils.js:120:56)\n    at D:\\9. DEV\\WORKSPACE\\momejected\\node_modules\\mongodb\\lib\\bulk\\unordered.js:465:9\n    at handleCallback (D:\\9. DEV\\WORKSPACE\\momejected\\node_modules\\mongodb\\lib\\utils.js:120:56)\n    at resultHandler (D:\\9. DEV\\WORKSPACE\\momejected\\node_modules\\mongodb\\lib\\bulk\\unordered.js:413:5)\n    at D:\\9. DEV\\WORKSPACE\\momejected\\node_modules\\mongodb-core\\lib\\connection\\pool.js:469:18\n    at _combinedTickCallback (internal/process/next_tick.js:67:7)\n    at process._tickDomainCallback (internal/process/next_tick.js:122:9)",
      "path": [
        "createCompany"
      ]
    
  ],
  "data": 
    "createCompany": null
  

在这种情况下，onError 不会被调用。

如何在突变中捕获和处理这个返回的错误？

【参考方案1】：

onCompleted 将返回 2 个参数，分别是 response 和 error 在此文档中 Relay Modern Mutations

但在我看来，回调函数并不好处理，所以我只是把它改成这样的Promise

export const createCompany = (company) =>
  new Promise((resolve, reject) => 
    const variables = 
      company
    ;

    commitMutation(
      environment,
      
        mutation,
        variables,
        onCompleted: (resp, err) => 
          if (err) return reject(err);
          return resolve(resp);
        ,
        onError: (err) => 
          return reject(err);
        
      
    );
  );

如何在组件中调用

createCompany(company)
  .then((resp) => 
    // handle your response here..
  )
  .catch((err) => 
    // handle your error here..
  )