CODEWITHSUNDEEP
reactjstypescriptgraphqlgatsby
reymon359
reymon359

Reputation: 1330

Error Field "frontmatter" is not defined by type MarkdownRemarkFilterInput on Gatsby Static Query

In my Index.tsx page am trying to perform a GraphQL query but I get this error on the browser.

Field "frontmatter" is not defined by type MarkdownRemarkFilterInput.

enter image description here

I am also getting this error on the browser's console

enter image description here

Here is the code of the Index.tsx page

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;

I do not know if I am performing the query wrong on the allMarkdownRemark part or if I am maybe accessing the data the wrong way. Could someone give me a hint on what is probably going wrong?

Thank you!

Upvotes: 2

Views: 2479

Answers (1)

reymon359
reymon359

Reputation: 1330

The problem was that I still had not added any posts. Once I created one the query worked and the problem disappeared.

Upvotes: 1

Related Questions