[FIX] Fix posts failing to load on blog page

cnocon · Jan 25, 2021 · ff7d198 · ff7d198
1 parent 639f29d
commit ff7d198
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 22 deletions.
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -15,7 +15,7 @@ exports.createPages = async ({ actions, graphql }) => {
 
   /**
    * CATEGORY PAGES
-   * 
+   *
    * 3 posts per page (unlimited pages per category)
    */
   categoryGroups.forEach(cat => {
@@ -37,8 +37,8 @@ exports.createPages = async ({ actions, graphql }) => {
   })
 
   /**
-   * LATEST POST PAGES 
-   * 
+   * LATEST POST PAGES
+   *
    * 3 posts per page
    */
   chunkedPosts.forEach((collection, index) => {
@@ -47,14 +47,15 @@ exports.createPages = async ({ actions, graphql }) => {
       component: path.resolve(`./src/components/PostsList/PostsList.jsx`),
       context: {
         skip: index * 3,
-        maxPageNumber: chunkedPosts.length
+        maxPageNumber: chunkedPosts.length,
+        posts: collection
       },
     })
   })
 
   /**
-   * POST SINGLE PAGES 
-   * 
+   * POST SINGLE PAGES
+   *
    */
   allPosts.forEach(( node, index ) => {
     actions.createPage({

diff --git a/src/components/PostsList/PostsList.jsx b/src/components/PostsList/PostsList.jsx
@@ -10,7 +10,7 @@ import Breadcrumbs from "../Breadcrumbs/Breadcrumbs"
 import Rule from "../Rule/Rule"
 
 const PostsList = ({ data, pageContext }) => {
-  const posts = data.posts.nodes;
+  const posts = pageContext.posts.map(post => post.node);
   const maxPageNumber = pageContext.maxPageNumber;
   const identifier = pageContext.skip;
   const currentPageNumber = Math.floor(identifier / 3) + 1;
@@ -52,7 +52,7 @@ const PostsList = ({ data, pageContext }) => {
   return (
     <Layout className="blog-posts">
       <Header />
-      <SEO stitle="Latest Posts | Front End Development Blog" sdescription="Latest Posts from Cristin O'Connor's Front End Development Blog" /> 
+      <SEO stitle="Latest Posts | Front End Development Blog" sdescription="Latest Posts from Cristin O'Connor's Front End Development Blog" />
       <div className="posts-list">
         <Rule title='Latest Posts' icon="fas fa-rss" />
         <Breadcrumbs crumbs={[
@@ -77,20 +77,7 @@ const PostsList = ({ data, pageContext }) => {
 }
 
 export const query = graphql`
-  query($skip: Int!) {
-    posts: allButterPost(sort: {fields: published, order: DESC}, skip: $skip, limit: 3) {
-      nodes {
-        categories {
-          name
-          slug
-        }
-        id
-        published(locale: "en-US")
-        slug
-        summary
-        title
-      }
-    }
+  query {
     categories: allButterPost {
       nodes {
         categories {