relayjs - 中继中的联合类型支持

Question

当您将字段定义为两种类型的联合时（例如机器包含 Ships 和 Droid），那么在 Relay 中您可以执行以下操作：

fragment on Faction@ relay(plural: true) {
  name,
  machines {
    ... on Ship {
      name
    }
    ... on Droid {
      name,
      primaryFunction
    }
  }
}

所以在机器道具下，您的对象被正确评估，但如果您想使用来自外部组件的片段来做到这一点：

fragment on Faction@ relay(plural: true) {
  name,
  machines {
    ${StarWarsShip.getFragment('ship')}
    ${StarWarsDroid.getFragment('droid')}
  }
}

然后你最终得到机器下的片段定义。看起来您被困住了，无法检查机器数组中哪个对象是哪个类型，因此您无法决定应该使用哪个组件。

Answer 1

存在一个__typename字段，您应该能够使用它来检查每条记录的类型：

询问

fragment on Faction @relay(plural: true) {
  name,
  machines {
    __typename  # <-- add this
    ${StarWarsShip.getFragment('ship')}
    ${StarWarsDroid.getFragment('droid')}
  }
}

应用代码

this.props.faction.machines.map(machine =>
  machine.__typename === 'Droid'
    ? <Droid droid={machine} />
    : <Ship ship={machine} />
);