是否可以在Relay中進行延遲加載？

我有一個包含許多子組件作爲數組的父組件。每個子組件都包含大量的數據。所以，我決定在Parent加載時不加載它們。從父容器取出的數據如下：是否可以在Relay中進行延遲加載？

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

然後，我想通過將孩子的id設置爲後端的API送每個孩子一個請求。每當數據恢復時，每個孩子都將顯示在用戶界面上，否則將顯示一個微調圖標以指示加載數據。

是否有可能在Relay中實現這一點？

更新：

這裏是選項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} /> 
    }); 
    } 
});

的問題是，當每個孩子得了渲染，它獲取它的數據，取而代之的是它自己的數據的最後一個子數據。例如，如果childIds = [1,2,3]，它將在屏幕上顯示3次3的數據; 3 3 3

來源

2016-07-03 lvarayut

存在用於延遲數據在開源繼電器取兩個典型的圖案：

使用@include或@skip指令，其中條件最初被設置爲假。加載UI之後，或者響應用戶操作，將條件設置爲true（例如，使用setVariables）。
使用嵌套的<Relay.Renderer>組件。頂級<RelayRenderer>將在一次往返中獲取最小「所需」數據，然後顯示該數據，這將使額外的<RelayRenderer>s獲取更多數據。

第二個選項似乎最適合您的用例：頂級渲染器只會獲取ID列表。然後它會呈現一個UI組件列表，每個組件都會獲取更多關於其ID的數據。列表項目將在數據解析時呈現。

這種方法的一個潛在缺點是所有項目的數據將被並行提取;列表中的第一項不一定是獲取其數據和渲染的第一項。爲了減輕這一點，應用程序必須對提取順序進行更好的控制;繼電器可通過injectable network layer進行調節。例如，您可以向服務器批量請求和/或確保排序（例如，通過故意延遲「稍後」請求的解析響應，直到先前的查詢已完成）。您可以查看社區驅動的react-relay-network-layer，它實現了其中的一些想法，並支持可插入的中間件來幫助實現其餘部分。

來源

2016-07-03 03:00:13

感謝您的回覆。我使用'Relay.Renderer'工作。仍然不太確定第一個選項。它似乎與一個正常的對象一起工作，如[答案]（http://stackoverflow.com/questions/34346273/search-functionality-using-relay）中所述，但不適用於數組。 – lvarayut

回答原來的評論：嵌套'RelayRenderer'沒有引用任何特殊的中繼。這意味着頂級'RelayRenderer'將呈現包含另一個'RelayRenderer'的內容（就像React組件可以呈現純HTML元素*或其他React組件）。如果您使用選項1，請注意'@ include'和'@ skip'帶有* boolean *參數，所以在技術上數組或對象將是無效的。如果這不是你所指的，最好用你正在使用的代碼來修改問題。 –

感謝您的澄清，我更新了問題以模擬我用選項1嘗試過的內容。當父節點通過childIds數組循環並呈現每個Child時，每個Child都成功獲取自己的數據。但是，在屏幕上，它總是多次顯示最後一個子數據。 – lvarayut

是否可以在Relay中進行延遲加載？

回答

相關問題