relay-compilerでinline fragmentのある型定義を生成するときのコツ

relay-compiler 13.2.0で確認した。つい昨日にRelay 14が出ていたので試してみたけど同様の結果になった。

特定のinterfaceに対するinline fragment内に、interfaceが共通して持つフィールドも都度列挙して書くと、直和型の __typename フィールドによる型の絞り込みが効くようになる。逆に、共通して持つフィールドをinline fragmentの外に書くと、型の絞り込みが効かなくなる。

# OK: __typenameによる絞り込みが効く
fragment Foo_bar_ok on Bar {
  ... on Bar1 {
    __typename
    barField
    bar1Field
  }
  ... on Bar2 {
    __typename
    barField
    bar2Field
  }
}

# NG: __typenameで型を絞り込めず、bar1Field, bar2Fieldが常にoptionalになってしまう
fragment Foo_bar_ng on Bar {
  barField
  ... on Bar1 {
    __typename
    bar1Field
  }
  ... on Bar2 {
    __typename
    bar2Field
  }
}

github.com

いくつかフィールド指定のパターンを変えて試してみたけど、__typename が "Bar1" に固定されるし bar1Field も bar2Field もoptionalになってしまうケースもある*1。GraphQL Code GeneratorでTypeScriptの型定義ファイルを生成した場合はいずれのケースでも __typename による絞り込みが効く型が生成された。

relay-compilerを使っている方は気をつけてください。よきコード生成ライフを！

*1:https://github.com/utgwkk/20220606-sketch-graphql-type-emission/blob/main/relay-compiler/__generated__/Foo_foo_ng2.graphql.ts