Relay 中的联合类型支持
Union types support in Relay
当您将字段定义为两种类型的联合时(例如机器包含 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')}
}
}
那么你最终会在机器下得到片段定义。看起来你被困住了,无法检查 machines 数组中的哪个对象是哪种类型,因此你无法决定应该使用哪个组件。
存在一个 __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} />
);
当您将字段定义为两种类型的联合时(例如机器包含 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')}
}
}
那么你最终会在机器下得到片段定义。看起来你被困住了,无法检查 machines 数组中的哪个对象是哪种类型,因此你无法决定应该使用哪个组件。
存在一个 __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} />
);