Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

GraphQL Relay Mutation Config RANGE_ADD's parentName for connections

I have a page that uses GraphQL Relay connection which fetches drafts.

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

In this page, I also create draft through CreateDraftMutation.

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

After this mutation, I want Relay to add the created draft into its store. The best candidate for mutation config is RANGE_ADD, which is documented as following:

https://facebook.github.io/relay/docs/guides-mutations.html

RANGE_ADD Given a parent, a connection, and the name of the newly created edge in the response payload Relay will add the node to the store and attach it to the connection according to the range behavior specified.

Arguments

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

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

connectionName: string The field name in the response that represents the connection

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

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

A map between printed, dot-separated GraphQL calls in alphabetical order, and the behavior we want Relay to exhibit when adding the new edge to connections under the influence of those calls. Behaviors can be one of 'append', 'ignore', 'prepend', 'refetch', or 'remove'.

The example from the documentation goes as the following:

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's fleet, so we
  // specify the faction's 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 is as obvious as faction, this is a piece of cake, but I've been having hard time identifying parentName and parentID if it came directly from query connections.

How do I do this?

Edit:

This is how query was exported.

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

which in return is used in the relay container

export default Relay.createContainer(MakeRequestPage, {
    fragments: {
        connections: () => Relay.QL`
          fragment on Connections {
like image 220
lustdante Avatar asked May 20 '16 09:05

lustdante


1 Answers

I've been having hard time identifying parentName and parentID if it came directly from query connections.

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

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

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

like image 153
Ahmad Ferdous Avatar answered Nov 11 '22 07:11

Ahmad Ferdous