GraphQL 中继突变配置 RANGE_ADD 的连接父名称

Question

我有一个页面使用 GraphQL Relay 连接获取 drafts。

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

在此页面中，我还通过 CreateDraftMutation 创建草稿。

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

在这个突变之后，我希望中继将创建的草稿添加到它的商店中。突变配置的最佳候选者是 RANGE_ADD，记录如下：

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'.

文档中的示例如下：

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',
      },
    }];
  }
  /* ... */
}

如果父项像派系一样明显，这是小菜一碟，但如果它直接来自查询连接，我一直很难识别 parentName 和 parentID。

我该怎么做？

编辑：

这是导出查询的方式。

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

其中在return中用于中继容器

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

Answer 1

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

Relay 文档示例中的

faction 和 ships 与您的案例中的 connections 和 drafts 完全相同。每个 GraphQLObject 都有一个 ID，您的 connections 对象也是如此。因此，对于您的突变，parentName 是 connctions 而 parentID 是 connections.

的 ID

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

顺便说一下，我猜 connections 和 drafts 是来自您的应用程序域的术语。否则，connections 会与 GraphQL 连接类型混淆。

GraphQL 中继突变配置 RANGE_ADD 的连接父名称

GraphQL Relay Mutation Config RANGE_ADD's parentName for connections

graphql

relayjs

graphql-js