javascript - 中继 createFragmentContainer 的现代用途

Question

我尝试 relay-modern 有一段时间了，我想知道 createFragmentContainer 除了描述 的片段之外还有什么用途>应该属于组件。

例如这就是文档显示它应该如何显示的方式

Parent.js

<QueryRenderer
  render={({error, props}) => {
    if (error || props) {
       return <Child someData={someData}>
    }
    return <div>Loading</div>
  }}

  query={graphql`
    query SomeQuery($id: ID!) {
      endpoint(id: $id) {
        ...Child_someData
      }
    }
  `}
/>

Child.js

export default createFragmentContainer( 
  ({someData}) => <header>{someData.title} - {someData.name}</header>,
  graphql`
    fragment Child_someData on EndPoint {
       title
       name
    }
  `
)

---

但不是以这种方式执行 Child.js，我可以重写或拆分带有查询的组件到 2 个不同的文件，如下所示:

ChildComponent.js

export default ({someData}) => <header>{someData.title} - {someData.name}</header>

Child.js

export default graphql`
  fragment Child_someData on EndPoint {
    title
    name
  }
`

它仍然可以工作(Parent.js 仍会识别该片段)。所以这让我想知道 createFragmentContainer 是否只是为了语法糖让事情变得更整洁。

如果有人能用这个来阐明，那就太棒了!在 documentation 中找不到这么多关于这个

Answer 1

你的例子如果是一个相当静态的实现......我认为你需要考虑的是这些是提供额外功能的容器，fragmentContainer作为更抽象的层之一。

我会更多地关注 refetchContainer和 paginationContainer扩展 fragmentContainer 的想法并查看 Github 存储库本身，

https://github.com/facebook/relay/blob/master/packages/react-relay/modern/ReactRelayFragmentContainer.js

因此，子容器当然可以是一个充满了要导出的片段的文件，但理想情况下，您应该将它们视为容器，它们是 React 组件的扩展。它们是冒泡成组合查询的容器片段，为您在 React 上下文中管理状态提供了便利。