CODEWITHSUNDEEP
javascriptreactjsgraphqlrelayjsrelay
Mendes
Mendes

Reputation: 18441

How to handle mutation errors on Relay Modern?

I´m using ReactJS with Relay for my client. Consider the following mutation:

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)
            },
        },
    );
}

How can I handle an error response sent from my 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
  }
}

On that case, the onError is not called.

How can I catch and handle this returned error inside the mutation ?

Upvotes: 3

Views: 2020

Answers (1)

nomkhonwaan
nomkhonwaan

Reputation: 61

The onCompleted will returns 2 parameters which are response and error on this document Relay Modern Mutations

But in my opinion, the callback function does not easy to handle so I just change it to the Promise like this

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);
        }
      }
    );
  });

How to call in the component

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

Upvotes: 6

Related Questions