Trying to add a list of posts to my homepage instead of a separate page in Gatsby using Contentful

Question

I wish to place a list of posts on my home page instead of having to create a seperate dynamic page. This is my gatsby-node.js file

// DYNAMICALLY CREATE PAGES FOR EACH POST
module.exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions;
  const postTemplate = path.resolve('src/templates/news.js');
  const postResult = await graphql(`
    query {
      allContentfulPost {
        edges {
          node {
            slug
          }
        }
      }
    }
  `);

  // Handle errors
  if (postResult.errors) {
    reporter.panicOnBuild('Error while running GraphQL query.');
    return;
  }

  // Create the pages for each markdown file
  postResult.data.allContentfulPost.edges.forEach(({ node }) => {
    createPage({
      component: postTemplate,
      path: `/news/${node.slug}`,
      context: {
        slug: node.slug,
      },
    });
  });

  // PAGINATION FOR BLOG POSTS
  const postsResult = await graphql(`
    {
      allContentfulPost(sort: { fields: date, order: DESC }, limit: 1000) {
        edges {
          node {
            slug
          }
        }
      }
    }
  `);

  if (postsResult.errors) {
    reporter.panicOnBuild('Error while running GraphQL query.');
    return;
  }

  // Create blog-list pages
  const posts = postsResult.data.allContentfulPost.edges;
  const postsPerPage = 12;
  const postNumPages = Math.ceil(posts.length / postsPerPage);
  Array.from({ length: postNumPages }).forEach((_, i) => {
    createPage({
      path: i === 0 ? '/' : `/news/${i + 1}`,
      component: path.resolve('./src/templates/news-list.js'),
      context: {
        limit: postsPerPage,
        skip: i * postsPerPage,
        postNumPages,
        currentPage: i + 1,
      },
    });
  });
};

And this is my news-list.js file

import React from 'react';
import { Link, graphql } from 'gatsby';

import Layout from '../components/layout';
import SEO from '../components/seo';

export const query = graphql`
  query ($skip: Int!, $limit: Int!) {
    allContentfulPost(sort: { fields: date, order: DESC }, limit: $limit, skip: $skip) {
      edges {
        node {
          title
          slug
          date(formatString: "MMMM Do, YYYY")
        }
      }
    }
  }
`;

const NewList = (props) => {
  // const { postNumPages } = props.pageContext;

  const posts = props.data.allContentfulPost.edges;

  return (
    
      

      {posts.map(({ node }) => {
        const title = node.title || node.slug;
        return (
          
            
              
                {title}
              

              
                {node.date}
              
            
          
        );
      })}
    
  );
};

export default NewList;

I have tried to import the above news-list.js as component from my templates folder into my index.js folder. However I am getting the Error:

TypeError: Cannot read property 'allContentfulPost' of undefined

But if i add path: i === 0 ? '/news' : /news/${i + 1}, into my node file and go to localhost/news i get the list of posts.

But I want them on the home page.. So i thought If I was to just have / it would work turns out no.

How can i get the posts that are listed at LH/news to be displayed on my homepage instead.

Update

New Component after latest answer

import React from 'react';
import { useStaticQuery, graphql, Link } from 'gatsby';

import Layout from '../components/layout';

// import News from '../components/news';
// import NewsList from '../templates/news-list';

export const query = graphql`
  {
    allContentfulPost(sort: { fields: date, order: DESC }, limit: 1000) {
      edges {
        node {
          title
          slug
          date(formatString: "MMMM Do, YYYY")
        }
      }
    }
  }
`;

const Index = ({ data }) => {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            companyname
          }
        }
      }
    `
  );

  return (
    
      
        
          
            
              
                hello@pfb{site.siteMetadata.companyname}.co.uk
              
              

              

              +44 020 3925 6054
            

            
              
                Warnford Court
                

                29 Throgmorton Street
                
 London, EC2N 2AT
              
            
          
        

        
          Company News
          
            {data.allContentfulPost.edges.map(({ node }) => (
              
                {node.title}
              
            ))}
          
        
      
    
  );
};
export default Index;

user_5585371 · Answer

I think you are mixing a lot of concepts.

One thing is the gatsby-node.js queries, useful to create dynamic pages based on dynamic data (from Contentful CMS in your case) based on a parameter (slug in your case).

Another thing is page queries, a way of retrieving data in a top-level components (pages or templates, not components).

If you want to list all your post in your homepage, you just need to create a GraphQL query and loop through the results just like:

const IndexPage = ({ data }) => {

   return  
    
    {data.allContentfulPost.edges.map(({node})=> {title})}
    
   

}

export const query = graphql`
    {
      allContentfulPost(sort: { fields: date, order: DESC }, limit: 1000) {
        edges {
          node {
            title
            slug
            date(formatString: "MMMM Do, YYYY")
          }
        }
      }
    }
`;

When using page queries, your data is stored inside props.data so you can destructure them directly into data.

In your case, you were importing a template inside a page, which doesn't make much sense because you don't have, among other things, the query.

Trying to add a list of posts to my homepage instead of a separate page in Gatsby using Contentful

Update

1 Answers