react-native - Relay Modern，Load More 不起作用，hasMore() 一直返回 false

Question

我目前正在使用 expo 处理 RN，列表最初很好，直到我遵循 loadMore 教程，加载更多不起作用，hasMore() 函数返回 false，而我的 hasNextPage 为 true

我的主屏幕里面有一个记录列表

这是我的家

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;

这是我的内部列表子组件

```

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 的原因，我有 1000 条记录供引用，最初加载 5

Answer 1

我有同样的问题，this.props.relay.hasMore() 总是返回 false。我明确地将 pageInfo 添加到查询 all 中，现在它应该返回 true。

pageInfo {
  endCursor
  hasNextPage
  hasPreviousPage
  startCursor
}

可惜文档不准确或与实现不同步。此外，我注意到在不向片段添加 pageInfo 的情况下，发送到服务器的查询 did 包含 pageInfo 字段，所以这个问题可能是一个 BUG在分页容器中。