Аполлон-форсированная проблема нумерации страниц с бесконечным повторением данных

Question

Пытаясь закодировать доказательство концепции пагинации с помощью apollo-boost, я получаю данные, повторяющиеся снова и снова, почему это происходит?

Я пробовал с fetchPolicy="cache-and-network" и без нее, но в любом случае он не будет работать должным образом, хотя я пытался следовать примеру документации, не отклоняясь. Я не знаю, что мне не хватает в этом

// mongoose model:
const TodoSchema = new Schema({
  todo: { type: String, required: true }
});

// graphql root query resolver:
pg_todos: {
  type: new GraphQLNonNull(new GraphQLList(new GraphQLNonNull(TodoType))),
  args: {
    page: { type: GraphQLInt },
    limit: { type: GraphQLInt }
  },
  resolve: async (parent, { page, limit }, req) => {
    return await TodoCtrl.getpaginated(page, limit);
  }
}

// top-most HOC
export default class Feed extends Component {
  render() {
    const query_variables = { page: 0 };
    return (
      <div>
        <PostsQuery variables={query_variables}>
          <FeedList />
        </PostsQuery>
      </div>
    );
  }
}

// PostsQuery
const q = gql`
  query pg_todos($page: Int) {
    pg_todos(page: $page) {
      todo
    }
  }
`;

export default class PostsFeedQuery extends Component {
  getVariables() {
    const { variables } = this.props;
    var query_variables = {
      page: 0
    };
    if (typeof variables !== typeof undefined) {
      if (typeof variables.page !== typeof undefined) {
        query_variables.page = variables.page;
      }
    }
    return query_variables;
  }
  render() {
    const { children } = this.props;
    const variables = this.getVariables();

    return (
      <Query query={q} variables={variables} fetchPolicy="cache-and-network">
        {({ loading, error, data, fetchMore }) => {
          if (loading) return <div>Loading...</div>;
          if (error)
            return (
              <div>
                <p>{error.message}</p>
              </div>
            );

          const { pg_todos } = data;

          return React.Children.map(children, function(child) {
            return React.cloneElement(child, { pg_todos, fetchMore });
          });
        }}
      </Query>
    );
  }
}

// FeedList
import InfiniteScroll from "react-infinite-scroller";

export default class FeedList extends Component {
  state = {
    page: 0,
    hasMore: true
  };
  loadMore = fetchMore => {
    const self = this;
    const { page } = this.state;
    fetchMore({
      variables: {
        page: page + 1
      },
      updateQuery(previousResult, { fetchMoreResult }) {
        if (!fetchMoreResult.pg_todos.length) {
          self.setState({ hasMore: false });
          return previousResult.pg_todos; ////////////
        }
        self.setState({ page: page + 1 });
        let rez = Object.assign({}, previousResult, {
          pg_todos: [...previousResult.pg_todos,...fetchMoreResult.pg_todos]
        });
        return rez;
      }
    });
  };
  render() {
    const self = this;
    const { pg_todos, fetchMore } = this.props;
    const { hasMore } = this.state;
    return (
      <div className="feed">
        <InfiniteScroll
          loadMore={() => self.loadMore(fetchMore)}
          hasMore={hasMore}
          loader={
            <div className="loader" key={"loader"}>
              Loading ...
            </div>
          }
        >
          {pg_todos.map((item, i) => {
            return <div key={i}>{item.todo}</div>;
          })}
        </InfiniteScroll>
      </div>
    );
  }
}