How do you define parentName, parentId, and connectionName in getConfigs for a nested connection?

Question

I am running into some issues writing a Relay Mutation on a nested connection. Here is the type structure:

{ 
  viewer { 
    entity(id) { 
      events // mutate connection here
    }
  }
}

In the getConfigs I have both the parentName and parentID pointing to the "viewer", however the connectionName "events" does not exist on the viewer it exists on the "entity" type.

As you will see in the code snippet below I am also unsure how to use variables in the getFatQuery to fetch the mutated data with an entity ID.

getConfigs and getFatQuery:

     getConfigs() {
        return [{
          type: 'RANGE_ADD',
          parentName: 'viewer',
          parentID: this.props.viewer.id,
          connectionName: 'events',
          edgeName: 'eventEdge',
          rangeBehaviors: {
            '': 'append'
          },
        }];
      }

      getFatQuery() {
        return Relay.QL`
          fragment on addEventPayload {
            viewer {
              entity(id: $entityId) // how do I use variables in the getFatQuery {
                events(first: 20) {
                  edges {
                    node {
                      status
                    }
                  }
                }
              }
            },
            eventEdge
          }
        `;
      }

I am more than happy to help clarify my question if it makes no sense so please feel free to ask questions about my question.

Thanks for the help!

thisbejim thisbejim · Accepted Answer · 2016-07-11T05:41:45

For anyone in the future getting snagged on this you don't have to worry about passing in the id again or dealing with nested queries/fields. Relay will just find and update the appropriate record on the client. This issue on Github was helpful for figuring this out, especially the comments from freiksenet.

In the example above - Instead of going through the viewer we just go straight to the entity.

outputFields:

  outputFields: {
    eventEdge: {
      type: eventEdge,
      resolve: async({event}) => {
        const eventsByOwner = await Event.getEventsByOwnerId(event.ownerId)
        const eventIndex = eventsByOwner.findIndex(evt => evt.id == event.id);
        const cursor = offsetToCursor(eventIndex);
        return {
          cursor: cursor,
          node: event
        };
      }
    },
    entity: {
      type: entity,
      resolve: async({event}) => {
        return Entity.getEntity(event.ownerId)
      }
    },
  }

getConfigs and getFatQuery:

getConfigs() {
    return [{
      type: 'RANGE_ADD',
      parentName: 'entity',
      parentID: this.props.entityId,
      connectionName: 'events',
      edgeName: 'eventEdge',
      rangeBehaviors: {
        '': 'append'
      },
    }];
  }

  getFatQuery() {
    return Relay.QL`
      fragment on addEventPayload @relay(pattern: true) {
        entity {
          events
        },
        eventEdge
      }
    `;
  }

Note: Using @relay(pattern: true) will make sure you don't run into issues when you don't pass in arguments for connection queries and will fall back to your last query of this type.

How do you define parentName, parentId, and connectionName in getConfigs for a nested connection?

1 Answers