爲RelayJS和GraphQL中的多形關聯編寫片段

我的後端架構有一個模型Request，它使用多態關聯，使得幾個不同的模型都具有許多請求和一個Request可以屬於這些不同模型中的任何一個。爲RelayJS和GraphQL中的多形關聯編寫片段

我有一個React組件，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') } 
      } 
      } 
     } 
     } 
    `, 
    } 
})

的問題是，現在呈現RequestTable爲Request的父母的一個又一個，在BarShowView中說，我需要添加一個新的片段到RequestList：

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

然後Relay會吐出警告，我需要提供bar和foo作爲道具給我的List，即使它與當前視圖無關。

由於Request與我架構中的大概8種不同的模型相關，這很快就會變得不合理。

創建可重用的反應組件的正確方法是什麼，它將呈現我正在查看的任何記錄的多態子項？

來源

2017-06-02 BruOps

我最終做了什麼（萬一有人遇到這種情況）只是將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') } 
      } 
      } 
     } 
     } 
    `, 
    } 
})

注意：如果你想知道爲什麼我傳遞了兩個fooID和barId，而不是「requestableType」和「requestableID」那是因爲我使用的藥劑，其沒有按不支持這種多態性。

來源

2017-06-07 15:31:16 BruOps

爲RelayJS和GraphQL中的多形關聯編寫片段

回答

相關問題