Add pagination for notes

gatsby-node.js

@@ -4,9 +4,10 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   const { createPage } = actions;
 
   const noteTemplate = path.resolve(`src/templates/note.tsx`);
-  const result = await graphql(`{
+  const result = await graphql(`
+    {
       allMdx(
-      limit: 10,
+        limit: 10
         filter: { fileAbsolutePath: { glob: "**/src/notes/*" } }
       ) {
         edges {
@@ -18,20 +19,40 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
           }
         }
       }
-  }`);
+    }
+  `);
 
   if (result.errors) {
     reporter.panicOnBuild(`Error while running GraphQL query.`);
     return;
   }
 
-  result.data.allMdx.edges.forEach(({ node }) => {
+  const posts = result.data.allMdx.edges;
+  const postsPerPage = 2;
+  const numPages = Math.ceil(posts.length / postsPerPage);
+  const rootPath = "/notes";
+
+  Array.from({ length: numPages }).forEach((_, i) => {
     createPage({
-      path: `/notes/${node.frontmatter.path}`,
+      path: rootPath + (i === 0 ? '' : `/${i + 1}`),
+      component: path.resolve("./src/templates/notes.tsx"),
+      context: {
+        limit: postsPerPage,
+        skip: i * postsPerPage,
+        numPages,
+        currentPage: i + 1,
+        rootPath,
+      },
+    })
+  });
+
+  posts.forEach(({ node }) => {
+    createPage({
+      path: `${rootPath}/${node.frontmatter.path}`,
       component: noteTemplate,
       context: {
         id: node.id,
-      }
+      },
     });
   });
 }

src/pages/notes.tsx

@@ -1,41 +0,0 @@
-import React from "react";
-import Navbar from "../components/navbar";
-import { graphql } from "gatsby";
-import style from "./notes.module.css";
-
-export default ({ data }) => {
-  console.log(data);
-  const posts = data.allMdx.edges;
-  return <>
-    <Navbar />
-    {
-      posts.map(({ node }) => {
-        return <article>
-          <div className={style.noteTitle}>
-            <h3><a href={`${node.frontmatter.path}`}>{node.frontmatter.title}</a></h3>
-            <time dateTime={node.frontmatter.date}>{node.frontmatter.date}</time>
-          </div>
-          <p>{node.excerpt}</p>
-        </article>;
-      })
-    }
-  </>;
-};
-
-export const query = graphql`
-query IndexQuery {
-  allMdx(sort: {order: ASC, fields: [fileAbsolutePath]}, filter: {fileAbsolutePath: {glob: "**/src/notes/*"}}) {
-    edges {
-      node {
-        excerpt(pruneLength: 250)
-        frontmatter {
-          title
-          date(formatString: "YYYY-MM-DD")
-          path
-        }
-        id
-      }
-    }
-  }
-}
-`;

src/templates/notes.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import Navbar from "../components/navbar";
+import { graphql, PageProps } from "gatsby";
+import style from "./notes.module.css";
+
+export default ({ data, pageContext }) => {
+  const posts = data.allMdx.edges;
+  const { currentPage, numPages, rootPath } = pageContext;
+  let backElement = null;
+
+  if (currentPage === 2) {
+    backElement = <a href={rootPath}>&lt;&lt;</a>;
+  } else if (currentPage !== 1) {
+    backElement = <a href={rootPath + '/' + (currentPage - 1)}>&lt;&lt;</a>;
+  }
+
+  return (
+    <>
+      <Navbar />
+      {posts.map(({ node }) => {
+        const frontmatter = node.frontmatter
+        return (
+          <article key={frontmatter.title}>
+            <div className={style.noteTitle}>
+              <h3>
+                <a href={`${rootPath + '/' + frontmatter.path}`}>{frontmatter.title}</a>
+              </h3>
+              <time dateTime={frontmatter.date}>{frontmatter.date}</time>
+            </div>
+            <p>{node.excerpt}</p>
+          </article>
+        )
+      })}
+      <div>
+        {backElement}
+        <p>{currentPage}</p>
+        {currentPage !== numPages ? <a href={rootPath + '/' + (currentPage + 1)}>&gt;&gt;</a> : ''}
+      </div>
+    </>
+  )
+}
+
+export const query = graphql`
+  query IndexQuery($skip: Int!, $limit: Int!) {
+    allMdx(
+      sort: { order: DESC, fields: [frontmatter___date] }
+      filter: { fileAbsolutePath: { glob: "**/src/notes/*" } }
+      limit: $limit
+      skip: $skip
+    ) {
+      edges {
+        node {
+          excerpt(pruneLength: 250)
+          frontmatter {
+            title
+            date(formatString: "YYYY-MM-DD")
+            path
+          }
+          id
+        }
+      }
+    }
+  }
+`