Gatsby静态查询上的MarkdownRemarkFilterInput类型未定义错误字段“ frontmatter”

时间:2020-05-24 08:25:36

标签: reactjs typescript graphql gatsby

在我的Index.tsx页中,我试图执行GraphQL查询,但在浏览器中收到此错误。

Field "frontmatter" is not defined by type MarkdownRemarkFilterInput.

enter image description here

我也在浏览器的控制台上收到此错误

enter image description here

这是Index.tsx页的代码

import React from 'react';
import {Link, graphql} from 'gatsby';
// import Intro from '../components/Intro';
import Head from '../components/Head';
import Layout from '../components/Layout';
import Bio from '../components/bio';

interface IndexProps {
  readonly data: PageQueryData;
}

const Index: React.FC<IndexProps> = ({data}) => {
  const siteTitle = data.site.siteMetadata.title;
  const posts = data.allMarkdownRemark.edges;

  return (
    <Layout title={siteTitle}>
      <Head
        title="Home"
        keywords={[
          `blog`,
          `gatsby`,
          `typescript`,
          `javascript`,
          `portfolio`,
          `react`
        ]}
      />
      <Bio />
      <article>
        <div className={`page-content`}>
          {posts.map(({node}) => {
            const title = node.frontmatter.title || node.fields.slug;
            return (
              <div key={node.fields.slug}>
                <h3>
                  <Link to={node.fields.slug}>{title}</Link>
                </h3>
                <small>{node.frontmatter.date}</small>
                <p dangerouslySetInnerHTML={{__html: node.excerpt}} />
              </div>
            );
          })}
        </div>
      </article>
    </Layout>
  );
};

interface PageQueryData {
  site: {
    siteMetadata: {
      title: string;
    };
  };
  allMarkdownRemark: {
    edges: {
      node: {
        excerpt: string;
        fields: {
          slug: string;
        };
        frontmatter: {
          date: string;
          title: string;
        };
      };
    }[];
  };
}

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
    allMarkdownRemark(
      filter: {frontmatter: {published: {ne: false}}}
      sort: {fields: [frontmatter___date], order: DESC}
    ) {
      edges {
        node {
          excerpt
          fields {
            slug
          }
          frontmatter {
            date(formatString: "MMMM DD, YYYY")
            title
          }
        }
      }
    }
  }
`;

export default Index;

我不知道我在allMarkdownRemark部分执行错误的查询还是我可能以错误的方式访问数据。有人可以提示我可能出了什么问题吗?

谢谢!

1 个答案:

答案 0 :(得分:0)

问题是我仍然没有添加任何帖子。创建完一个查询后,查询开始工作,问题消失了。