relayjs - Relay 中的联合类型支持

当您将字段定义为两种类型的并集(在示例机器中包含 Ships 和 Droid)时，您可以在 Relay 中执行以下操作:

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

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

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

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

最佳答案

存在一个 __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} />
);

关于relayjs - Relay 中的联合类型支持，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32558861/