relayjs - Relayでの共用体タイプのサポート

Question

フィールドを 2 つのタイプの結合として定義した場合 (たとえば、マシンには 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} />
);