React/Apollo共享查詢狀態

我有一個非常簡單的應用程序，具有列表視圖和詳細視圖。列表視圖包含一個graphql查詢，該查詢映射到包含項目數組的data prop。選擇一個項目實例化一個細節視圖，其中該項目的id用於爲該項目組合另一個graphql查詢。React/Apollo共享查詢狀態

const ListView = graphql(ALL_ITEMS, ...)(ListViewComponent); 

<ListView data={ [....] }> 
    <Detail> 
     <Next /> <Prev /> {/* <-- need info from ListView.data */}   
    </Detail> 
    { this.props.data.map(....) } 
</ListView>

我遇到的麻煩是將上一個/下一個導航添加到該詳細視圖。細節組件不知道data prop中包含ListView組件中所有項目的內容。在一個典型的redux應用程序中，我將這些項存儲爲全局應用程序狀態，並將它們注入到組件中將是微不足道的，但是Apollo似乎並沒有這樣工作。其狀態樹不是非常消耗品（例如使用connect()）。

我看到一些可能的解決方案這一點，他們都不大：

包裹上/下一個導航組件與graphql查詢，查找currentOffset + 1和currentOffset -1。這絕對是最「apollo」的解決方案，但問題在於currentOffset對於該組件是未知的，因爲它沒有data支柱。此外，我將不得不確保列表視圖查詢中的任何其他變量（例如過濾器，排序）都已通過，並且這些變量也位於不明確的apollo狀態樹中。
收聽我的reducer中的APOLLO_QUERY_RESULT操作，並使用其他組件需要的所有信息維護查詢結果的第二個副本。
使用context共享data道具給兒童。
明確地通過data道具給兒童。

似乎是一種常見的情況。什麼是正確的方法？

來源

2017-07-15 UncleCheese

將數據作爲道具傳遞可能是最簡單的解決方案。

您可能想要考慮的另一個選項是簡單地將您希望訪問相同查詢數據的任何組件包裝到另一個graphql HOC中。如果您利用您用於ListView的HOC（ALL_ITEMS）的相同的查詢，則可以像在ListView中那樣在子項中使用data prop。這種方法的好處是 - 只要你use the default fetchPolicy - 你的子組件不會觸發你的服務器的第二個查詢;它只會利用緩存中已有的內容。

來源

2017-07-15 20:20:49

React/Apollo共享查詢狀態

回答

相關問題