Relay Modern、Load Moreは動作しません。hasMore（）はfalseを返し続けます。

Question

私は現在、loadMoreチュートリアルに従うまで、expoを使用してRNで作業しています。

が、これはこれは私の内側のリストの子コンポーネント

です

import Expo from 'expo'; 
import React, {Component} from 'react'; 
import { 
    View, 
    Text, 
    ActivityIndicator, 
    FlatList, 
    TouchableOpacity 
} from 'react-native'; 

import { 
    Button 
} from 'react-native-elements'; 

import { 
    QueryRenderer, 
    createPaginationContainer, 
    graphql 
} from 'react-relay'; 

import environment from '../createRelayEnvironment'; 
import DummyList from '../component/dummyList'; 

class Home extends Component { 

    render() { 
    return(
     <QueryRenderer 
     environment={environment} 
     query={graphql` 
      query homeQuery(
      $count: Int! 
      $cursor: String! 
     ) { 
      viewer { 
       ...dummyList_viewer 
      } 
      } 
     `} 
     variables= {{ 
      count: 5, 
      cursor: '' 
      } 
     } 
     render={({error, props, retry}) => { 
      if(props){ 
      return(
       <DummyList {...props} /> 
      ); 
      } 

      return(
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}> 
       <ActivityIndicator size="large" /> 
      </View> 
     ); 
     }} 
     /> 
    ); 
    } 
} 

export default Home; 

私の家で私のhasNextPageが真であるのに対し、

私のホーム画面は、その中にレコードリストを持っている、falseを返す）関数

`` `

import Expo from 'expo'; 
import React, {Component} from 'react'; 
import { 
    View, 
    Text, 
    FlatList, 
    TouchableOpacity 
} from 'react-native'; 

import { 
    createPaginationContainer, 
    graphql 
} from 'react-relay'; 

class DummyList extends Component { 
    renderItem(item) { 
    return(
     <View style={{padding: 10}}> 
     <Text key={item.node.id}>{item.node.title}</Text> 
     </View> 
    ); 
    } 

    _loadMore() { 
    console.log('this.props.relay.hasMore()', this.props.relay.hasMore()); 
    if(!this.props.relay.hasMore() || this.props.relay.isLoading()){ 
     return; 
    } 

    this.props.relay.loadMore(
     10, 
     e => { 
     console.log('e', e); 
     } 
    ) 
    } 

    render() { 
    console.log('apa aja nih props-nya', this.props); 
    return(
     <View> 
     <FlatList 
      data={this.props.viewer.allDummies.edges} 
      renderItem={({item}) => this.renderItem(item)} 
      keyExtractor={(item, index) => item.node.id} 
     /> 
     <TouchableOpacity style={{padding: 10}} onPress={() => this._loadMore()}> 
      <Text>Load More</Text> 
     </TouchableOpacity> 
     </View> 
    ) 
    } 
} 

export default createPaginationContainer(
    DummyList, 
    { 
    viewer: graphql` 
     fragment dummyList_viewer on viewer { 
     allDummies(first: $count, after: $cursor) @connection(key: "DummyList_allDummies"){ 
      pageInfo{ 
      hasNextPage 
      } 
      edges{ 
      cursor 
      node { 
       id 
       title 
      } 
      } 
     } 
     } 
    ` 
    }, 
    { 
    direction: 'forward', 
    getConnectionFromProps(props) { 
     console.log('getConnectionFromProps props', props); 
     return props.viewer; 
     // return props.user && props.user.feed; 
    }, 
    getFragmentVariables(prevVars, totalCount) { 
     return { 
     ...prevVars, 
     count: totalCount 
     } 
    }, 
    getVariables(props, { count, cursor }, fragmentVariables) { 
     return { 
     count, 
     cursor 
     } 
    }, 
    query: graphql` 
     query dummyListQuery(
     $count: Int! 
     $cursor: String 
    ){ 
     viewer{ 
      ...dummyList_viewer 
     } 
     } 
    ` 
    } 
); 

` ``

私は私のhasMore（）がfalseを返す続ける理由を見つけることができなかった、私はFYI 1000本の記録を持っている、と最初はロード5

Answer 1

私は同じ問題を抱えていました。this.props.relay.hasMore()は常にfalseを返します。私は明示的にクエリをすべてpageInfoに追加しました。

pageInfo { 
    endCursor 
    hasNextPage 
    hasPreviousPage 
    startCursor 
} 

不正確なドキュメントは正確ではないか、実装と同期していません。さらに、pageInfoをフラグメントに追加しないと、サーバーに送信されたクエリはになりました。pageInfoフィールドが含まれている可能性があります。この問題はおそらくページネーションコンテナのBUGです。