2017-07-07 7 views
1

ReduxのProviderコンポーネントとconnectファンクションは、mapStateToProps経由でラップされたコンポーネントへのストアの状態への参照を提供します。素敵な記事How to Build a Reduxで述べたように、これはグローバルストアオブジェクトを参照したり、DOMを無限にデータを渡す必要がないように行われます。ApolloProviderを小道具の代わりに州に提供することはできますか?

これには大きな利点があります。ストア状態はDOMに依存しません。任意の2つの要素をページの任意の場所に配置して、ストアから必要なデータをすべて提供できます。顧客検索のフォームと顧客の検索結果のリストがある場合、これらのプレゼンテーション要素の関係はデータへのアクセスに影響しません。

私が知る限り、アポロ反応のApolloProviderはこの原則に加入していません。 graphqlを使用してクエリでコンポーネントをラップすると、そのクエリの結果はラップされたコンポーネントにpropsとして提供されます。これらの結果がアプリ内の別の場所で必要な場合は、手動で渡すか、グローバル参照に保存する必要があります。特に、graphqlクエリから返された小道具はDOMの上に渡すことはできません。

reduxのプロバイダと同じ方法で、ApolloProviderをクエリ結果を他のアプリに「提供」する方法はありますか?この機能を自分で構築する必要がありますか?それとも、もっと良いことに、私は何かを誤解していますか?

答えて

1

ApolloはReduxを使用してgraphqlクエリ結果をキャッシュします。基本的に、同じデータを必要とする複数のコンポーネントがある場合、Apolloを使用して、それぞれを同じgraphqlクエリでラップしてください。 Graphqlコネクターを一度定義し、同じコネクターを使ってN個のコンポーネントをラップすることさえできます。

+0

私はそれを考えていませんでした。私は間違いなく、キャッシングが宣伝されているように動作することを自分自身に証明するためにそれをプレイしなければなりません。たとえば、クエリがmapStateToPropsから渡された変数に依存する場合、そのうちの1つだけが起動し、残りがキャッシュを使用する場合ですか? – Ziggy

+0

これは、Re-frameの「サブスクリプション」のようなものです。 – Ziggy

+0

Hmm ...また、 'state.apollo.data.ROOT_QUERY.customers'をApolloのデータにIDとして使用することで、店舗に行くことができるようです... – Ziggy

関連する問題