Implemented infinite scroll

app/package.json

@@ -5,7 +5,7 @@
   "version": "0.1.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
-    "gatsby": "^2.15.36",
+    "gatsby": "^2.23.0",
     "gatsby-image": "^2.2.27",
     "gatsby-plugin-manifest": "^2.2.21",
     "gatsby-plugin-offline": "^3.0.14",

app/src/pages/index.js

@@ -1,18 +1,30 @@
-import React from "react"
+import React, { useState, useEffect } from "react"
 
 import Layout from "../components/layout"
 import SEO from "../components/seo"
 import BookCard from "../components/bookcard"
 
+function myFunction(data, end, setEnd) {
+  if (document.documentElement.clientHeight+document.documentElement.scrollTop===document.documentElement.scrollHeight) {
+    setEnd(end+4)
+  }
+}
+
 export default ({data}) => {
+  let [end, setEnd] = useState(4);
+  useEffect(()=>{
+    window.document.onscroll = () => myFunction(data, end, setEnd);
+  })  
   return (
     <Layout>
       <SEO title="Home" />
       <div className="flex flex-row flex-wrap">
-      {data.allBooksJson.edges.map(function(x) {
-        return (
-          <BookCard book={x.node} key={x.node.id} />
-        )
+      {data.allBooksJson.edges.map(function(x, index) {
+        if(index<end){
+          return (
+            <BookCard book={x.node} key={x.node.id} />
+          )
+        }        
       })}
       </div>
     </Layout>