SHARE
TWEET

Untitled

a guest Apr 18th, 2019 68 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import { graphql } from 'react-apollo';
  3. import { gql } from 'graphql-tools';
  4.  
  5. const QUERY = gql`
  6.   query MatchesByDate($date: Int) {
  7.     matches(date: $date) {
  8.       id
  9.       minute
  10.       period
  11.       highlights {
  12.         ...
  13.       }
  14.       ...
  15.     }
  16.   }
  17. `;
  18.  
  19. class MatchList extends Component {      
  20.   render() {
  21.     const ({ data: { loading, errors, matches } }) = this.props;
  22.  
  23.     return (
  24.       <div className="matchlist">
  25.         {loading && <div className="loader" />}
  26.         {errors && <div className="errors">...</div>}
  27.  
  28.         {!loading && !matches && <span className="none">No Matches Found!</span>}
  29.  
  30.         {!loading &&
  31.           matches &&
  32.           matches.map(match => <div className="match">...</div>)}
  33.  
  34.         {!loading &&
  35.           matches &&
  36.           <button onClick={this.onFetchMore}>
  37.             Fetch More Matches
  38.           </button>}
  39.       </div>
  40.     );
  41.   }
  42.  
  43.   onFetchMore = () => {
  44.     const ({ data: { matches, fetchMore } }) = this.props;
  45.  
  46.     fetchMore({
  47.       variables: { date: matches[matches.length - 1].date },
  48.       updateQuery: (previousResult, { fetchMoreResult, queryVariables }) => {
  49.         return {
  50.           ...previousResult,
  51.           // Add the new matches data to the end of the old matches data.
  52.           matches: [
  53.             ...previousResult.matches,
  54.             ...fetchMoreResult.matches,
  55.           ],
  56.         };
  57.       },
  58.     });
  59.   }
  60. }
  61.  
  62. export default graphql(QUERY)(MatchList);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top