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

【问题标题】：Error Field "frontmatter" is not defined by type MarkdownRemarkFilterInput on Gatsby Static QueryGatsby 静态查询上的 MarkdownRemarkFilterInput 类型未定义错误字段“frontmatter”
【发布时间】：2020-09-10 23:15:12
【问题描述】：

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

Field "frontmatter" is not defined by type MarkdownRemarkFilterInput.

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

这是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 部分执行了错误的查询，或者我是否可能以错误的方式访问数据。有人可以提示我可能出了什么问题吗？

谢谢！

【问题讨论】：

尝试通过单击三角形来展开第一个错误（++在控制台错误消息中++）。有时，答案就隐藏在那里。祝你好运
查询是否在 GraphiQL 中运行？在localhost:8000/___graphql 试用。我认为错误出在您的 GraphQL 排序中，sort: {fields: [frontmatter___date], order: DESC}。似乎frontmatter___date 不是MarkdownRemarkFieldsEnum 的一部分

标签： reactjs typescript graphql gatsby

【解决方案1】：

问题是我还没有添加任何帖子。一旦我创建了一个查询，问题就消失了。

【讨论】：