React/Apolloの共有クエリ状態

Question

私は非常にシンプルなアプリケーションで、リストビューと詳細ビューを持っています。リストビューは、アイテムの配列を含むdata propにマップされたgraphqlクエリでラップされます。 1つの項目を選択すると詳細ビューがインスタンス化されます。ここで項目のIDはその項目の別のgraphqlクエリーを作成するために使用されます。

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

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

問題は、その詳細ビューに前/次のナビゲーションを追加しています。詳細コンポーネントはコンポーネント内のすべてのアイテムを含むdata小道具の内容を認識しません。典型的なreduxアプリケーションでは、アイテムをグローバルなアプリケーション状態として保存し、それらをコンポーネントに注入するのは簡単ですが、Apolloはそのようには動作しません。その状態ツリーは非常に消耗的ではない（例えばconnect()を使用）。

私は、このためのいくつかの可能な解決策を見て、それらのどれも偉大に見えるん：

• currentOffset + 1とcurrentOffset -1探しgraphqlクエリと前/次のナビゲーションコンポーネントをラップします。これは間違いなく最も「アポロ」解決策ですが、data小道具がないため、そのコンポーネントにはcurrentOffsetが不明ですという問題があります。さらに、リストビューのクエリ上の他の変数（フィルタ、並べ替えなど）も渡されていることを確認してください。また、状態ツリーにはわかりにくいapolloもあります。
• 私のレデューサーでAPOLLO_QUERY_RESULTアクションを聞いて、他のコンポーネントに必要なすべての情報を含むクエリ結果の2番目のコピーを維持します。
• を使用して、子どもに小道具dataを共有してください。
• data小道具を子供に明示的に渡します。

一般的なシナリオのようです。適切なアプローチは何ですか？

Answer 1

データを小道具として渡すのがおそらく最も簡単な解決策です。

その他のオプションとして、同じクエリデータにアクセスしたいコンポーネントを別のgraphql HOCでラップするだけです。 ListViewのHOC（ALL_ITEMS）に使用すると同じクエリを使用する場合は、ListViewと同じように、子にdata小道具を使用できます。この方法についてのきちんとしたことは、 - あなたの子コンポーネントがサーバーに対して2番目のクエリを起動しない限り、use the default fetchPolicyです。すでにキャッシュにあるものを単に利用するだけです。