GraphQL transformation mutation configuration RANGE_ADD parentName for connections

Question

I have a page using a GraphQL relay connection that retrieves drafts .

 query { connections { drafts(first: 10) { edges { node { ... on Draft { id } } } } } } 

On this page, I also create a draft via CreateDraftMutation .

 mutation { createDraft(input: { clientMutationId: "1" content: "content" }) { draft { id content } } } 

After this mutation, I want Relay to add the created project to his store. The best candidate for mutation configuration is RANGE_ADD, which is documented as follows:

https://facebook.imtqy.com/relay/docs/guides-mutations.html

RANGE_ADD Given the parent, connection, and name of the newly created edge in the response payload relay, add node to the repository and attach it to the connection according to the specified range.

Arguments

parentName: string The name of the field in the response representing the parent of the connection

parentID: DataID string of the parent node that contains the connection

connectionName: string The name of the field in the response representing the connection

edgeName: string The name of the field in the response that represents the newly created edge

rangeBehaviors: {[call: string]: GraphQLMutatorConstants.RANGE_OPERATIONS}

The map between the printed, dotted GraphQL calls in alphabetical order and the behavior that we want Relay to show when adding a new edge to the connections under the influence of these calls. The behavior can be one of "append", "ignore", "preend", "refetch" or "remove".

An example from the documentation is as follows:

 class IntroduceShipMutation extends Relay.Mutation { // This mutation declares a dependency on the faction // into which this ship is to be introduced. static fragments = { faction: () => Relay.QL`fragment on Faction { id }`, }; // Introducing a ship will add it to a faction fleet, so we // specify the faction ships connection as part of the fat query. getFatQuery() { return Relay.QL` fragment on IntroduceShipPayload { faction { ships }, newShipEdge, } `; } getConfigs() { return [{ type: 'RANGE_ADD', parentName: 'faction', parentID: this.props.faction.id, connectionName: 'ships', edgeName: 'newShipEdge', rangeBehaviors: { // When the ships connection is not under the influence // of any call, append the ship to the end of the connection '': 'append', // Prepend the ship, wherever the connection is sorted by age 'orderby(newest)': 'prepend', }, }]; } /* ... */ } 

If the parent class is as obvious as the fraction, it's a piece of cake, but it's hard for me to determine parentName and parentID if it came directly from the queries.

How to do it?

Edit:

This is how the request was exported.

 export default new GraphQLObjectType({ name: 'Query', fields: () => ({ node: nodeField, viewer: { type: viewerType, resolve: () => ({}), }, connections: { type: new GraphQLObjectType({ name: 'Connections', 

which in turn is used in the relay container

 export default Relay.createContainer(MakeRequestPage, { fragments: { connections: () => Relay.QL` fragment on Connections { 

Answer 1

It was difficult for me to determine parentName and parentID if this came directly from the queries.

faction and ships in the example from the Relay documentation are exactly the same as connections and drafts in your case. Each GraphQLObject has an identifier, so your connections object. Therefore, for your mutation, parentName has connctions and parentID is the connections identifier.

 query { connections { id drafts(first: 10) { edges { node { ... on Draft { id } } } } } } 

By the way, I think connections and drafts are terms from your application domain. Otherwise, the connections mixed with the connection type of GraphQL.