中继 createFragmentContainer 的现代目的

Posted 2023-03-08

【中文标题】中继 createFragmentContainer 的现代目的

【英文标题】：Relay Modern purpose of createFragmentContainer

【发布时间】：2017-12-06 16:39:01

【问题描述】：

我一直在尝试 relay-modern 一段时间，我想知道createFragmentContainer 的目的是什么，而不仅仅是描述应该的片段> 属于Component。

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

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 中找不到这么多关于此的内容

【问题讨论】：

只是为了重温一下，我发现如果我使用QueryRenderer而不使用createFragmentContainer，传递的道具将无法作为真实数据使用取而代之的是，中继将使用某种结构从存储中查找数据。因此，根据我的观察，如果我使用的是QueryRenderer，我将需要createFragmentContainer

【参考方案1】：

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

我会更多地研究 refetchContainer 和 paginationContainer 如何扩展 fragmentContainer 的概念，并查看 Github 存储库本身，

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

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

【参考方案2】：

中继编译器将找到您的Child.js 文件，因此将创建片段并获取您的查询。 但是，不同之处在于 createFragmentContainer 是一个 HOC，Relay 使用它来保证组件在所有必要数据可用之前不会渲染。这就是FragmentContainer 的目的，这就是你应该使用它的原因。