react-router-relay: handle sucess or error on mutation

3
votes

What's the best way to handle success or error after a mutation?

I'm using React.js and react-router-relay to make graphQL queries and mutations.

Let's say I have a React component performing a Rename mutation. I'd like to have a user callback after the mutation has been done saying

  • "The object have successfully been renamed" or
  • "error: the name is already taken" or
  • "error: the name must be at least 10 characters long"
  • etc.

How can I have that kind of callback? And how to handle different error codes?

1
reactjsreact-routergraphqlrelayjsreact-router-relay

1 Answers

4
votes

Well! It seems it was as simple as add a callbacks object on the mutation: 

var onSuccess = () => {
  console.log('Mutation successful!');
};
var onFailure = (`enter code here`transaction) => {
  var error = transaction.getError() || new Error('Mutation failed.');
  console.error(error);
};
var mutation = new MyMutation({...});

Relay.Store.commitUpdate(mutation, {onFailure, onSuccess});

https://facebook.github.io/relay/docs/api-reference-relay-store.html