2017-04-22 9 views
0

私はアプリ内でページ分割を実装しており、fetchMore操作中にloadingフラグが更新されていないこと以外はすべて動作します。React Apolloクライアントは、fetchMore()を使用してローディングフラグを更新していません。どうして?

fetchMoreは、返されるまで再レンダリングしません。つまり、フラグは決してtrueに変更されません。

私がオフセット/リミット例に密接に私のコードをモデル化していますそこにいくつかの状態を追跡伴ういくつかの同様の質問がありますが、私はより多くのフラグを追加し、提供するものを使用しないことを好むだろうhttp://dev.apollodata.com/react/pagination.html

... 
render() { 
    if (!this.props.loading) { 
     const hasNext = false); 
     const canLoadMore = hasNext && !this.props.loading; 

     return (
       <div> 
        ... 
        <LoadMoreButton 
         onHandleLoadMore={this.props.handleLoadMore} 
         canLoadMore={canLoadMore} 
         loading={this.props.loading} // <- this doesn't change because component doesn't re-render until results are back 
        /> 
       </div> 
      ); 
    } 
} 
... 
const queryOptions = { 
    options: props => ({ 
     variables: { 
      offset: 0, 
      limit: 5, 
     } 
    }), 
    props ({ data: { loading, fetchMore } }) { 
     return { 
      loading, 
      handleLoadMore() { 
       return fetchMore({ 
        variables: { 
         offset: nextOffset, 
         limit: limit, 
        }, 
        updateQuery: (previousResult, { fetchMoreResult }) => { 
         if (!fetchMoreResult) { 
          return previousResult; 
         } 


         return update(previousResult, { 
          {...} 
         }); 
        } 
       }); 
      }, 
     }; 
    }, 
}; 

答えて

1

私は同じ問題を持っていたと私はgraphql設定でオプションに

notifyOnNetworkStatusChange: true 

を設定することで、それを解決しました。このよう

options:() => ({ 
     variables: { 
      count: 10, 
      current: 1 
     }, 
     fetchPolicy: 'network-only', 
     notifyOnNetworkStatusChange: true 
    }) 
関連する問題