example-fetch-more-react-apollo.js

import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import { gql } from 'graphql-tools';

const QUERY = gql`
  query MatchesByDate($date: Int) {
    matches(date: $date) {
      id
      minute
      period
      highlights {
        ...
      }
      ...
    }
  }
`;

class MatchList extends Component {      
  render() {
    const ({ data: { loading, errors, matches } }) = this.props;

    return (
      <div className="matchlist">
        {loading && <div className="loader" />}
        {errors && <div className="errors">...</div>}

        {!loading && !matches && <span className="none">No Matches Found!</span>}

        {!loading &&
          matches &&
          matches.map(match => <div className="match">...</div>)}

        {!loading &&
          matches &&
          <button onClick={this.onFetchMore}> 
            Fetch More Matches
          </button>}
      </div>
    );
  }
  
  onFetchMore = () => {
    const ({ data: { matches, fetchMore } }) = this.props;

    fetchMore({
      variables: { date: matches[matches.length - 1].date },
      updateQuery: (previousResult, { fetchMoreResult, queryVariables }) => {
        return {
          ...previousResult,
          // Add the new matches data to the end of the old matches data.
          matches: [
            ...previousResult.matches,
            ...fetchMoreResult.matches,
          ],
        };
      },
    });
  }
}

export default graphql(QUERY)(MatchList);

can u please share your setup?
in my case the previousResult return the same data as in fetchMoreResult, in other words, the previous results aren't stored.

Thank You So Much It Helped Me A Lot In My Project :)

can u please share your setup?
in my case the previousResult return the same data as in fetchMoreResult, in other words, the previous results aren't stored.

i have same problem, did you find solution and what was causing this problem? @m1m6

can u please share your setup?
in my case the previousResult return the same data as in fetchMoreResult, in other words, the previous results aren't stored.

i have same problem, did you find solution and what was causing this problem? @m1m6

Check your fetch-policy configurations