在RelayJS和GraphQL中为多态关联编写片段

Question

我的后端模式有一个模型，Request，它使用一个多态关联，使得几个不同的模型都有-多个请求，一个Request可以属于任何一个不同的模型。

我有一个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作为我的列表的支持，即使它与当前视图无关。

由于Request与我的模式中大约8种不同的模型相关联，这很快就变得不合理了。

创建一个可重用的react组件的正确方法是什么，它将呈现我正在查看的任何记录的多态子元素？

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') }
            }
          }
        }
      }
    `,
  }
})

注意:如果您想知道为什么我要同时放弃fooID和barId而不是"requestableType“和"requestableID”，那是因为我使用的是不支持这种多态性的药物。