Add skip & limit infinite scroll

Author: lorensr

src/components/Review.js

@@ -245,9 +245,14 @@ const withDeleteMutation = graphql(DELETE_REVIEW_MUTATION, {
           removeReview: true
         },
         update: store => {
-          let data = store.readQuery({ query: REVIEWS_QUERY })
+          const query = {
+            query: REVIEWS_QUERY,
+            variables: { skip: 0, limit: 10 }
+          }
+
+          let data = store.readQuery(query)
           remove(data.reviews, { id })
-          store.writeQuery({ query: REVIEWS_QUERY, data })
+          store.writeQuery({ ...query, data })
 
           data = store.readQuery({ query: READ_USER_FAVORITES })
           remove(data.currentUser.favoriteReviews, { id })

src/components/ReviewForm.js

@@ -155,11 +155,14 @@ const withAddReview = graphql(ADD_REVIEW_MUTATION, {
           }
         },
         update: (store, { data: { createReview: newReview } }) => {
-          const data = store.readQuery({
-            query: REVIEWS_QUERY
-          })
+          const query = {
+            query: REVIEWS_QUERY,
+            variables: { skip: 0, limit: 10 }
+          }
+
+          const data = store.readQuery(query)
           data.reviews.unshift(newReview)
-          store.writeQuery({ query: REVIEWS_QUERY, data })
+          store.writeQuery({ ...query, data })
         }
       })
     }

src/components/ReviewList.js

@@ -0,0 +1,88 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { graphql } from 'react-apollo'
+import { propType } from 'graphql-anywhere'
+import find from 'lodash/find'
+
+import Review from './Review'
+
+import { REVIEWS_QUERY, REVIEW_ENTRY } from '../graphql/Review'
+
+const FETCH_MORE = 3
+
+class ReviewList extends Component {
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll)
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll)
+  }
+
+  handleScroll = event => {
+    if (this.props.networkStatus === FETCH_MORE) {
+      return
+    }
+
+    const currentScrollHeight = window.scrollY + window.innerHeight
+    const pixelsFromBottom =
+      document.documentElement.scrollHeight - currentScrollHeight
+    if (pixelsFromBottom < 250) {
+      this.props.loadMoreReviews()
+    }
+  }
+
+  render() {
+    const { reviews, user } = this.props
+
+    return (
+      <div className="Reviews-list">
+        <div className="Reviews-content">
+          {reviews &&
+            reviews.map(review => (
+              <Review key={review.id} review={review} user={user} />
+            ))}
+        </div>
+        <div className="Spinner" />
+      </div>
+    )
+  }
+}
+
+ReviewList.propTypes = {
+  reviews: PropTypes.arrayOf(propType(REVIEW_ENTRY)),
+  user: PropTypes.object
+}
+
+const withReviews = graphql(REVIEWS_QUERY, {
+  options: {
+    errorPolicy: 'all',
+    variables: { skip: 0, limit: 10 },
+    notifyOnNetworkStatusChange: true
+  },
+  props: ({ data: { reviews, fetchMore, networkStatus } }) => ({
+    reviews,
+    networkStatus,
+    loadMoreReviews: () => {
+      return fetchMore({
+        variables: { skip: reviews.length - 5, limit: 15 },
+        updateQuery: (previousResult, { fetchMoreResult }) => {
+          if (!fetchMoreResult.reviews) {
+            return previousResult
+          }
+
+          const newReviews = fetchMoreResult.reviews.filter(
+            ({ id }) => !find(previousResult.reviews, { id })
+          )
+
+          return {
+            ...previousResult,
+            reviews: [...previousResult.reviews, ...newReviews]
+          }
+        }
+      })
+    }
+  })
+})
+
+export default withReviews(ReviewList)

src/components/Reviews.js

@@ -1,18 +1,14 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { graphql } from 'react-apollo'
 import get from 'lodash/get'
 import FavoriteIcon from 'material-ui-icons/Favorite'
 import Button from 'material-ui/Button'
 import AddIcon from 'material-ui-icons/Add'
 import Modal from 'material-ui/Modal'
-import { propType } from 'graphql-anywhere'
 
-import Review from './Review'
+import ReviewList from './ReviewList'
 import ReviewForm from './ReviewForm'
 
-import { REVIEWS_QUERY, REVIEW_ENTRY } from '../graphql/Review'
-
 class Reviews extends Component {
   state = {
     addingReview: false
@@ -27,7 +23,7 @@ class Reviews extends Component {
   }
 
   render() {
-    const { reviews, loading, user } = this.props
+    const { user } = this.props
     const favoriteCount = get(user, 'favoriteReviews.length')
 
     return (
@@ -43,43 +39,34 @@ class Reviews extends Component {
             <h1>Reviews</h1>
           </header>
         </div>
-        <div className="Reviews-content">
-          {loading ? (
-            <div className="Spinner" />
-          ) : (
-              reviews.map(review => (
-                <Review key={review.id} review={review} user={user} />
-              ))
-            )}
 
-          {user && (
-            <div>
-              <Button
-                onClick={this.addReview}
-                variant="fab"
-                color="primary"
-                className="Reviews-add"
-              >
-                <AddIcon />
-              </Button>
+        <ReviewList user={user} />
 
-              <Modal
-                open={this.state.addingReview}
-                onClose={this.doneAddingReview}
-              >
-                <ReviewForm done={this.doneAddingReview} user={user} />
-              </Modal>
-            </div>
-          )}
-        </div>
+        {user && (
+          <div>
+            <Button
+              onClick={this.addReview}
+              variant="fab"
+              color="primary"
+              className="Reviews-add"
+            >
+              <AddIcon />
+            </Button>
+
+            <Modal
+              open={this.state.addingReview}
+              onClose={this.doneAddingReview}
+            >
+              <ReviewForm done={this.doneAddingReview} user={user} />
+            </Modal>
+          </div>
+        )}
       </main>
     )
   }
 }
 
 Reviews.propTypes = {
-  reviews: PropTypes.arrayOf(propType(REVIEW_ENTRY)),
-  loading: PropTypes.bool.isRequired,
   user: PropTypes.shape({
     favoriteReviews: PropTypes.arrayOf(
       PropTypes.shape({
@@ -89,12 +76,4 @@ Reviews.propTypes = {
   })
 }
 
-const withReviews = graphql(REVIEWS_QUERY, {
-  options: { errorPolicy: 'all' },
-  props: ({ data: { reviews, loading } }) => ({
-    reviews,
-    loading
-  })
-})
-
-export default withReviews(Reviews)
+export default Reviews

src/graphql/Review.js

@@ -17,8 +17,8 @@ export const REVIEW_ENTRY = gql`
 `
 
 export const REVIEWS_QUERY = gql`
-  query ReviewsQuery {
-    reviews(limit: 20) {
+  query ReviewsQuery($skip: Int, $limit: Int) {
+    reviews(skip: $skip, limit: $limit) {
       ...ReviewEntry
     }
   }