No match on any of the rangeBehaviors specified in RANGE_ADD config

Question

I have the following mutation:

export default class AddTaskMutation extends Relay.Mutation {
  static fragments = {
    classroom: () => Relay.QL`
      fragment on Classroom {
        id,
      }`,
  };

  getMutation() {
    return Relay.QL`mutation { addTask }`;
  }

  getFatQuery() {
    return Relay.QL`
      fragment on AddTaskPayload {
        classroom {
          taskList,
        },
        taskEdge,
      }
    `;
  }

  getConfigs() {    
    let rangeBehaviors = {};
    let member_id = 'hasNewMessages(true) member_id(' + Global.fromGlobalId(this.props.createdByMember)['id'] + ')';
    rangeBehaviors[''] = 'append';
    rangeBehaviors['hasToDo(true)'] = 'append';
    rangeBehaviors['hasToDo(false)'] = 'append';
    rangeBehaviors['isStart(true)'] = 'ignore';
    rangeBehaviors['isStart(false)'] = 'append';
    rangeBehaviors[`${member_id}`] = 'append';
    rangeBehaviors['hasNewMessages(true) member_id(null)'] = 'ignore';
    return [
      {
        type: 'RANGE_ADD',
        parentName: 'classroom',
        parentID: this.props.classroomId,
        connectionName: 'taskList',
        edgeName: 'taskEdge',
        rangeBehaviors,
      }
    ];
  }

  getVariables() {
    return {
      title: this.props.title,
      instruction: this.props.instruction,
      start_date: this.props.start_date,
      end_date: this.props.end_date,
      is_archived: this.props.is_archived,
      is_published: this.props.is_published,
      is_preview: this.props.is_preview,
      productId: this.props.productId,
      classroomId: this.props.classroomId,
      createdByMember: this.props.createdByMember,
      subTasks: this.props.subTasks,
      students: this.props.students,
    };
  }
}

When running my application I get the following 2 warnings:

warning.js:44 Warning: RelayMutation: The connection taskList{hasNewMessages:true,member_id:null} on the mutation field classroom that corresponds to the ID Classroom:35 did not match any of the rangeBehaviors specified in your RANGE_ADD config. This means that the entire connection will be refetched. Configure a range behavior for this mutation in order to fetch only the new edge and to enable optimistic mutations or use refetch to squelch this warning.

and

warning.js:44 Warning: Using null as a rangeBehavior value is deprecated. Use ignore to avoid refetching a range.

Since the other rangeBehaviors work, I assume there must be a syntactical error when declaring 2 variables in one behavior - in this case hasNewMessages and memeber_id.

I've looked for an answer for this, but I just cannot find any. The docs don't seem to cover this edge case either.

EDIT: I also tried rangeBehaviors['hasNewMessages(true),member_id(null)'] = 'ignore'; (comma as a separator) but with no success.

Answer 1

After inspecting the source code of Relay (file RelayMutationQuery.js) I could see what array key it was searching for in the array of all rangeBehaviors. I could then update my code to the correct formatting.

Since I haven't found anything on the web about this edge case, I'll post my solution here - perhaps someone will find it helpful in the future.

---

When having 2 (or more) variables for a rangeBehavior, you need to separate them with a period (.). Also, when passing null you don't pass it explicitly - just omit it from its' variable.

For example:

Right:

rangeBehaviors['hasNewMessages(true).member_id()'] = 'ignore';

Wrong:

rangeBehaviors['hasNewMessages(true),member_id(null)'] = 'ignore';