尝试使用 Contentful 将帖子列表添加到我的主页而不是 Gatsby 中的单独页面

Question

我希望在我的主页上放置一个帖子列表，而不是创建一个单独的动态页面。这是我的gatsby-node.js 文件

// 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,
      },
    });
  });
};

这是我的news-list.js 文件

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 (
    <Layout>
      <SEO title='News' />

      {posts.map(({ node }) => {
        const title = node.title || node.slug;
        return (
          <div className='container mx-auto prose prose-lg'>
            <div className='mb-2'>
              <Link to={`/posts/${node.slug}`}>
                <h3 className='underline font-sans mb-1'>{title}</h3>
              </Link>

              <div className='flex items-center justify-between'>
                <span className='font-mono text-sm'>{node.date}</span>
              </div>
            </div>
          </div>
        );
      })}
    </Layout>
  );
};

export default NewList;

我尝试将上述news-list.js 作为组件从我的模板文件夹导入到我的index.js 文件夹中。但是我得到了错误：

TypeError: Cannot read property 'allContentfulPost' of undefined

但如果我将 path: i === 0 ? '/news' : /news/${i + 1}, 添加到我的节点文件中并转到 localhost/news 我会得到帖子列表。

但我希望它们出现在主页上.. 所以我想如果我只拥有/ 它会起作用的结果不是。

我怎样才能让LH/news 列出的帖子显示在我的主页上。

更新

最新答案后的新组件

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 (
    <Layout>
      <section className='c-mt-10'>
        <div className=''>
          <div className='font-mono md:flex md:justify-between'>
            <div className='mb-5'>
              <a href={`mailto:hello@${site.siteMetadata.companyname}.co.uk`}>
                hello@pfb{site.siteMetadata.companyname}.co.uk
              </a>
              <br />
              <br />
              <tel>+44 020 3925 6054</tel>
            </div>

            <a
              href='https://www.google.com/maps/place/Warnford+Court,+29+Throgmorton+St,+London+EC2N+2AT/@51.5154096,-0.0890419,17z/data=!3m1!4b1!4m5!3m4!1s0x48761cacb440b98d:0x9742679143333ff!8m2!3d51.5154096!4d-0.0868479'
              target='_blank'
              rel='noreferrer'>
              <address className='text-right'>
                Warnford Court
                <br />
                29 Throgmorton Street
                <br /> London, EC2N 2AT
              </address>
            </a>
          </div>
        </div>

        <div>
          <h2>Company News</h2>
          <ul>
            {data.allContentfulPost.edges.map(({ node }) => (
              <li key={node.title}>
                <Link to={node.slug}>{node.title}</Link>
              </li>
            ))}
          </ul>
        </div>
      </section>
    </Layout>
  );
};
export default Index;

Answer 1

我认为你混合了很多概念。

一件事是gatsby-node.js 查询，可用于基于参数（在您的情况下为slug）基于动态数据（在您的情况下来自 Contentful CMS）创建动态页面。

另一件事是page queries，一种在顶级组件（页面或模板，而不是组件）中检索数据的方法。

如果你想在你的主页上列出你的所有帖子，你只需要创建一个 GraphQL 查询并循环遍历结果，就像这样：

const IndexPage = ({ data }) => {

   return <Layout> 
    <ul>
    {data.allContentfulPost.edges.map(({node})=> <li key={node.title}><Link to={node.slug}>{title}</Link></li>)}
    </ul>
   </Layout>

}

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

使用页面查询时，您的数据存储在props.data 中，因此您可以将它们直接解构为data。

在您的情况下，您是在页面中导入模板，这没有多大意义，因为您没有查询等。