Apolloクライアントのオフセットベースのページネーションエラー

Question

最近、ページングの処理方法のために、Relay Client for Apolloの移行を決定しました。開発しているアプリケーションにオフセットベースのページネーションが必要です。これはApolloでサポートされています。

アポロのドキュメントごとにオフセットページングを実装しようとしているうちに、http://dev.apollodata.com/react/pagination.html#numbered-pagesのエラーが発生しますが、私のビューアは未定義です。私はfetchMore機能を実装しようとすると

私だけの間の時間をレンダリング小道具からのデータにアクセスしています。このエラーの参照が

が発生します。 Graphiteクエリに viewerエントリポイントを使用していますが、セットアップを変更しようとしてもエラーが続くので、セットアップと関係があります。

... ... ... 
105 props: ({ data: { loading, viewer, fetchMore }}) => ({ 
106  loading, 
107  viewer, 
108  loadMoreEntries() { 
109  return fetchMore({ 
110   variables: { 
111   offset: viewer.allSweeps.edges.length 
112   }, 
113   updateQuery: (previousResult, { fetchMoreResult }) => { 
114   if (!fetchMoreResult) { return previousResult; } 
115   return Object.assign({}, previousResult, { 
116    viewer: [...previousResult.allSweeps, ...fetchMoreResult.allSweeps] 
117   }); 
118   } 
119  }); 
120  } 
... ... .. 

編集1： は、これまでのところ、このエラーは、ライフサイクルの問題に関連していることが表示されます。いくつかのデバッグを行う私は、単純なクエリを実行している間に以前のデータが存在していたときに、このページ分割方法が最初の小道具をビューアにロードせずに読み込むことに気付きました。

Reactライフサイクルメソッドの1つを使用してこの変更を追跡すると、データに変数を割り当てることができるかどうかがわかります。しかし、この方法が正しく設定されているかどうかはまだ分かりません。私が確かに知る前に、データを入力してから改ページする必要があります。

編集2： 伝播中のデータをきめ細かく制御するために、componentWillUpdateを使用することができます。そのステップが解決されるように。実際のページネーションメカニズムを今すぐ調査する必要があります。

Answer 1

私がここで欠落していた2つの大きな部分は、先に述べたように、データフローを細かく制御するためにcomponentWillUpdateを利用する必要があったことです。

さらに重要なことに、私はupdateQueryの戻り値が自分のスキーマのようにフォーマットされ、__typenamesを含む必要があることを認識していませんでした。ここで

は

136   updateQuery: (previousResult, { fetchMoreResult }) => { 
 
137   if (!fetchMoreResult) { return previousResult; } 
 
138   const newEdges = fetchMoreResult.viewer.allSweeps.edges; 
 
139   return { 
 
140    viewer: { 
 
141    __typename: previousResult.viewer.__typename, 
 
142    allSweeps: { 
 
143     __typename: previousResult.viewer.allSweeps.__typename, 
 
144     edges: [...newEdges] 
 
145    } 
 
146    } 
 
147   }

唯一のことは、fetchMoreは、私は行くよ本当にされていない以上、無限の改ページをターゲットにしているように見えるということです、それがどのように見えるかの抜粋ですために。私は物事を少しシンプルに保つことができ、オフセット/リミットのステートフルな管理に固執し、簡単なクエリを使用して目的の結果を得ることができます。しかし、私はfetchMoreResultのような私のような私のデータの境界を知らせることができるように私はここで与えられたいくつかの便利さがあります。

これは誰かを助けることを望みます。