RelayJSおよびGraphQLでの多態性結合のフラグメントの作成

Question

私のバックエンドスキーマには、いくつかの異なるモデルがすべて多くのRequestsおよびRequestが異なるモデルのいずれかに属しているような多形性の関連を使用するモデルRequestがあります。

私は潜在的な親モデルのいずれかで使用できるようにしたい反応コンポーネント、RequestListを持っています。

FooShowView.js

class FooShowView extends Component { 
    render() { 
    return (
     <RequestList router={this.props.router} /> 
    ) 
    } 
} 

export default Relay.createContainer(ShowView, { 
    initialVariables: { 
    FooId: null 
    }, 
    fragments: { 
    viewer: (variables) => { 
     return Relay.QL` 
     fragment on Viewer { 
      Foo(id: $FooId) { 
      id${ RequestList.getFragment('Foo') } 
      } 
     }` 
     ` 
    } 
    } 
}); 

RequestList.js

class RequestList extends Component { 

    renderRows =() => { 
    return this.props.requests.edges.map(edge => edge.node).map((intReq, i) => { 
     return (
     <RequestRow 
      request={ intReq } 
      key={ i } 
     /> 
    ); 
    }); 
    } 

    render() { 
    return (
     <Table> 
     { this.renderRows() } 
     </Table> 
    ); 
    } 
}; 

export default Relay.createContainer(RequestList, { 
    fragments: { 
    foo:() => Relay.QL` 
     fragment on Foo { 
     requests(first: 10) { 
      edges { 
      node { 
       ${ RequestRow.getFragment('request') } 
      } 
      } 
     } 
     } 
    `, 
    } 
}) 

問題は今Requestの両親の別のもののためにRequestTableをレンダリングすることである。ここでは

は、いくつかのサンプルコードです、 BarShowViewで、 RequestListに新しいフラグメントを追加する必要があります：

bar:() => Relay.QL` 
    fragment on Bar { 
    requests(first: 10) { 
     edges { 
     node { 
      ${ RequestRow.getFragment('request') } 
     } 
     } 
    } 
    } 
`, 

Relayは、現在のビューに関係ない場合でも、barとfooの両方をリストに提供する必要があるという警告を吐き出します。

Requestは、スキーマ内で約8種類のモデルに関連付けられているため、すぐには不合理になります。

私が見ているレコードの多型子をレンダリングする再利用可能な反応コンポーネントを作成する正しい方法は何ですか？

Answer 1

最後に、RequestListフラグメントをルートに置き、変数を渡すだけで、適切な関連レコードを照会するだけです。半ダースの断片を書く必要がなくなります。だから私のcreateContainer呼び出しは今のようになります。

export default Relay.createContainer(RequestList, { 
    initialVariables: { 
    fooId: null, 
    barId: null 
    } 
    fragments: { 
    viewer:() => Relay.QL` 
     fragment on Viewer { 
     requests(
      first: 10, 
      fooId: $fooId, 
      barId: $barId 
     ) { 
      edges { 
      node { 
       ${ RequestRow.getFragment('request') } 
      } 
      } 
     } 
     } 
    `, 
    } 
}) 

注：私はエリクサーを使用していますので、それはdoesnのどのです代わりに「requestableType」のfooIDとbarIdの両方を渡すと「requestableID」よ、なぜあなたは迷っている場合その多型のタイプをサポートしていません。