Apollo Query fetchMore

fetchMore

可用于根据另一个查询返回的数据更新查询结果。大多数情况下，它用于处理无限滚动分页或其他情况，如果您已经有一些数据正在加载更多数据。

const QUERY = gql`
  query posts($offset: Int) {
    posts(offset: $offset, limit: 10) {
      id
      title
      description
      city
      hits
      count_likes
      count_comments
      time_ago
      images {
        id
        url
        width
        height
      }
      user {
        id
        name
        avatar
        introduction
      }
    }
  }
`;
onEndReached={() => {
                  this.setState({
                    loadingMore: true
                  });
                  fetchMore({
                    variables: {
                      offset: data.posts.length
                    },
                    updateQuery: (prev, { fetchMoreResult }) => {
                      if (!fetchMoreResult) return prev;
                      this.setState({
                        loadingMore: false
                      });
                      return Object.assign({}, prev, {
                        posts: [...prev.posts, ...fetchMoreResult.posts]
                      });
                    }
                  });
                }}

该方法需要variables与新查询一起发送映射。在这里，我们将偏移量设置为data.posts.length 方便获取未显示的数据，并控制fetchMore停止的时机

当我们使用fetchMore时，阿波罗客户端将触发fetchMore查询并使用updataQuery选项中的逻辑将其结合到原始结果中。命名的参数updataQuery是一个function，将与你的组件相关联查询的前一结果（即QUERY本例中）和fetchMore查询结果assign  并返回这两者的组合。