是否可以在Relay中进行延迟加载？

Question

我有一个Parent组件,它包含许多子组件作为数组.每个子组件都包含大量数据.因此,当父加载时,我决定不加载所有这些.从Parent容器获取的数据如下:

{
    ...
    childs: [childId1, childId2, ...] // Array of child id
    ...
}

然后,我想通过将孩子的id传递给后端api,为每个孩子发送一个请求.每当其数据返回时,每个子项都将显示在UI上,否则,将显示一个用于指示加载数据的微调器图标.

是否有可能在接力中实现这一目标？

更新:

以下是选项1的示例:

儿童容器:

export default Relay.createContainer(Child, {
  initialVariables: {
    id: null,
    hasQuery: false
  },
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        child(id: $id) @include(if: $hasQuery) {
          ...
        }
      }
    `,
  },
});

子组件:

const Child = React.createClass({
  componentWillMount() {
    ChildContainer.setVariables({ id: this.props.childId, hasQuery: true }); 
  }
});

父容器:

export default Relay.createContainer(Parent, {
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        childIds // Return an array of child's id 
        Child.getFragment('viewer') 
      }
    `,
  },
});

父组件:

const Parent = React.createClass({
  render() {
    this.props.viewer.childIds.map(childId => {
      <Child childId={childId} />
    }); 
  }
});

问题是当每个Child都被渲染时,它获取了它的数据并用自己的数据替换了最后一个Child数据.例如,如果childIds = [1,2,3],它在屏幕上显示3次三次数据; 3 3 3

Answer 1

在开源继电器中有两种典型的延迟数据获取模式:

1. 条件最初设置为false的使用@include或@skip指令.在加载UI或响应用户操作后,将条件设置为true(例如with setVariables).
2. 使用嵌套<Relay.Renderer>组件.顶级<RelayRenderer>将在一次往返中获取最小的"必需"数据,然后显示它,这将呈现<RelayRenderer>可以获取更多数据的额外s.

第二个选项似乎最适合您的用例:顶级渲染器只会获取ID列表.然后它将呈现一个UI组件列表,每个组件都会获取有关其ID的更多数据.列表项将在其数据结算时呈现.

这种方法的一个潜在缺点是所有项目的数据将被并行获取; 列表中的第一项不一定是第一个获取其数据和呈现的项目.为了缓解这种情况,应用程序必须保持对提取顺序的更大控制; 继电器通过可注射网络层来适应这种情况.例如,您可以批量请求到服务器和/或确保排序(例如,通过故意延迟解决"以后"请求的响应,直到先前的查询完成为止).您可以查看社区驱动的react-relay-network-layer,它实现了一些这些想法,并支持可插拔的中间件来帮助实现其余的功能.