2017-04-22 31 views
0

我正在一個應用程序中執行分頁,除loading標誌在fetchMore操作期間沒有更新以外,所有程序都可以正常工作。反應阿波羅客戶端不使用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

我有同樣的問題,我通過設置

notifyOnNetworkStatusChange: true 

到graphql配置選項來解決它。

像這樣:

options:() => ({ 
     variables: { 
      count: 10, 
      current: 1 
     }, 
     fetchPolicy: 'network-only', 
     notifyOnNetworkStatusChange: true 
    }) 
相關問題