2017-03-01 11 views
0

コンポーネントが親コンポーネントから初期データを受け取るようにしたいのですが、依然として独自のデータにページを設定することができます。例えばページネーミングするコンポーネントに初期クエリは必要ありません

<DynamicChild>どのように見えるかを

<Parent> //Makes initial GraphQL call 
    <StaticChild/> //Uses initial data and never needs to rerender 
    <DynamicChild/> //Paginates the same query that the Parent made, will need to rerender for every new "page" 
</Parent> 

を検討?私の理解はfetchMore(ページネーション用)にアクセスするためにgraphql関数(react-apolloから)に<DynamicChild>をラップする必要があります。しかし、graphql関数は初期クエリを必要とします。<DynamicChild>は作成する必要はありません。私の選択肢は次のようになります:

a)<Parent>ページめくりをしていますか?つまり、shouldComponentUpdateメソッドを<StaticChild>に追加する必要があります。

b)<DynamicChild>と同様の最初のクエリを<Parent>とし、2つのクエリがバッチ処理されていないと仮定して、2番目のクエリをReduxストアからプルすることに依存します。

c)<Parent>があります。最初のクエリを作成し、fetchMore()コールバックを<DynamicChild>に渡します。私は、<DynamicChild>がコールバックを使用したときに、<Parent>を再レンダリングしようと試みることを恐れています。

これらのソリューションは簡単ですが、<DynamicChild>独自の初期クエリを定義せずに独自のページ付けクエリを定義する方法はありますか?

答えて

0

refetch機能の例として、GraphQLとapolloクライアント(feed page)で作成されたアプリケーションのフィードページを見ることができます。

b)からは、最初にページに入るときに2回クエリをフェッチすると思います。私は同様の問題があり、クエリは親と子でフェッチされます。

fetchMoreが呼び出された後に親がレンダーされると思います。

+0

このソリューションは、本質的に状況(b)です。 44行目では、コンポーネントに初期クエリとしてFEED_QUERYが与えられます。それは私が避けたいものです。 – dshapiro

+0

私はそのソリューションのc)フィードページは、[Feed](https://github.com/apollographql/GitHunt-React/blob/master/ui/components/Feed.js)コンポーネントを使用して、onLoadMore => fetchMore関数。親から。 –

関連する問題