Relay mutations are the actions that cause side effects in your systems, because they change the state of some resource that your UI cares about. What's interesting about Relay mutations is that they care about side effects that happen to your data as a result of a change in the state of something. For example, if you change the name of a user, this will certainly impact a screen that displays the user details. But, it could also impact a listing screen that shows several users.

The idea with Relay mutations is that you can tell them, ahead of time, where the application might be impacted in terms of side effects. Since other components may be affected by a mutation, we have already declared their data dependencies, Relay can handle this sort of thing! Awesome! Let's see what a mutation looks like:

class ChangeAgeMutation extends Relay.Mutation { 
  static fragments = { 
    user: () => Relay.QL` 
      fragment on User { 
        id, 
      } 
    `, 
    viewer: () => Relay.QL` 
      fragment on Viewer { 
        id, 
      } 
    `, 
  } 
 
  getMutation() { 
    return Relay.QL`mutation{changeAge}`; 
  } 
 
  getFatQuery() { 
    return Relay.QL` 
      fragment on ChangeAgePayload @relay(pattern: true) { 
        user { 
          age, 
        }, 
        viewer { 
          users, 
        }, 
     } 
    `; 
  } 
 
  getConfigs() { 
    return [{ 
      type: 'FIELDS_CHANGE', 
      fieldIDs: { 
        user: this.props.user.id, 
        viewer: this.props.viewer.id, 
      }, 
    }]; 
  } 
 
  getVariables() { 
    return { 
      age: this.props.age, 
      id: this.props.todo.id, 
    }; 
  } 
} 

Yikes, that's a lot of code for changing the name of a user. Well, it really isn't that much because this includes handling side effects. Let's do a quick overview of what makes up this mutation:

This is just the declaration of the mutation itself. In the next chapter, we'll walk through performing the actual mutation in response to some event, such as user interaction.