TypeError：无法读取未定义的属性'allMarkdownRemark'-在Gatsby上

Question

我有问题的图像以及出现问题的代码段。 有帮助吗？

import React from "react";
import Link from "gatsby-link";
import Helmet from "react-helmet";

import "../styles/blog-listing.css";

export default function Index({ data })
{

const { edges: posts } = data.allMarkdownRemark;

  return (
    <div className="blog-posts">
      {posts
        .filter(post => post.node.frontmatter.title.length > 0)
        .map(({ node: post }) => {
          return (
            <div className="blog-post-preview" key={post.id}>
              <h1>
                <Link to={post.frontmatter.path}>{post.frontmatter.title}</Link>
              </h1>
              <h2>{post.frontmatter.date}</h2>
              <p>{post.excerpt}</p>
            </div>
          );
        })}
    </div>
  );
}

Answer 1

您需要使用graphql查询来选择降价文件。查询结果将作为data对象的props对象传递。您可以尝试在文件末尾添加这样的查询：

export const pageQuery = graphql`
  query BlogQuery() {
    allMarkdownRemark(sort: {order: DESC, fields: [frontmatter___date]}) {
      totalCount
      edges {
        node {
          excerpt(pruneLength: 400)
          id
          timeToRead
          fields {
            slug
          }
          frontmatter {
            title
            category
            date(formatString: "YYYYMMDD")
          }
        }
      }
    }
}
`