Ember data: Rollback createRecord on error

Question

I'm trying to find the best way to avoid adding a record when there's an error using Ember Data:

This is my code:

createUser: function() {
  // Create the new User model
  var user = this.store.createRecord('user', {
    firstName: this.get('firstName'),
    lastName: this.get('lastName'),
    email: this.get('email')
  });

  user.save().then(function() {
    console.log("User saved.");
  }, function(response) {
    console.log("Error.");
  });
},

I'm validating the schema on backend and returning a 422 Error in case it fails.

If I don't handle the error, the record is added to the site and I also get a console error.

So I did this:

  user.save().then(function() {
    console.log("User saved.");
  }, function(response) {
    user.destroyRecord();
  });

Which kind of works deleting the record after reading the server response but:

1) I see the record appearing and dissapearing (like a visual glitch to say it somehow).

2) The console error still appears.

Is there a way to better handle this? I mean, is there a way to avoid adding the record when the server returns an error? Is there a way to avoid showing the console error?

Thanks in advance

Answer 1

You'll need to catch the error in the controller and then use deleteRecord() to remove it from the store:

actions: {
    createContent() {
      let record = this.store.createRecord('post', {
        title: ''
      });

      record.save()
        .then(rec => {
          // do stuff on success
        })
        .catch(err => {
          record.deleteRecord();
          // do other stuff on error
        });
    }
  }