I cannot find the posts is not defined

I been trying to figure out where can I find this issue.

Been trying to figure Why this error happen. I'm having hard time figure this out: Can you give some advice on What I can do to debug this issue, please.

Saying that: 'posts' is not defined I cannot find where the problem is at I tried scanning my code to see if missing anything but I cannot find no where.

import * as React from "react"
import { Link, graphql } from "gatsby"
import Layout from "../components/layout"
// import Bio from "../components/bio"
import Seo from "../components/seo"
import { CoverImage, getImage } from 'gatsby-plugin-image';

  const ArticleListing = ({ data, location, nodes  }) => {
  const siteTitle = data.site.siteMetadata.title || ``
  const posts = data.allMarkdownRemark.nodes

  if (post.length === 0) { // is message tell us if there no post being display post this message.
    return (
      <div id="content">
          <Layout location={location} title={siteTitle}>
            <Seo title="All posts" />
            <p>There were no blogs found. Our team is working hard to create content you will enjoy.</p>
          </Layout>
      </div>
    )
  }

  return ( // This where you be rendering your post.
    <div id="content">
      <Layout location={location} title={siteTitle}>
        <Seo title="All posts" />
        {/* <Bio /> */}
        <ol className="inline_blog" style={{ listStyle: `none` }}>
        {posts.map(function (post) {
                const title = post.frontmatter.title || post.fields.slug;

                let image = getImage(nodes.frontmatter.featuredimage);
                let alt = post.frontmatter.title;

                return (
                    <li key={post.fields.slug}>
                        <article
                            className="post-list-item"
                            itemScope
                            itemType="http://schema.org/Article"
                        >

                            <header>
                                <div className="cover_image">
                                    <CoverImage
                                        image={image}
                                        alt={alt} />
                                </div>

                                <small>
                                    {post.frontmatter.date}
                                </small>

                                <h2 className="post_heading_title">
                                    <Link to={post.fields.slug} itemProp="url">
                                        <span
                                            itemProp="headline">
                                            {title}
                                        </span>
                                    </Link>
                                </h2>
                            </header>

                            <section>
                                <p dangerouslySetInnerHTML={{
                                    __html: post.frontmatter.description || post.excerpt,
                                }}
                                    itemProp="description" />
                            </section>
                        </article>
                    </li>
                );
            })}
        </ol>
      </Layout>
    </div>
  )
}

export default ArticleListing


        
export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }

    allMarkdownRemark(
        sort: { fields: [frontmatter___date], 
    }) {
      nodes {
        id
        fields {
          slug
        }
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          title
          description
          tages
          featuredimage {
            childImageSharp {
              gatsbyImageData(
                width: 500
                blurredOptions: {width: 100}
                placeholder: BLURRED
                transformOptions: {cropFocus: CENTER}
                aspectRatio: 0.7
              )
            }
          }
        }
      }
    }    
  } 
`

Solution

The problem is that you are using a page query in an ArticleListing component (placed inside src/components/ArticleListing.js), so in a regular React component.

As you can see in the previous docs, page queries are only available in top-level components (pages or templates).

That said, you have two options depending on your use-case structure.

Moving your ArticleListing component inside src/templates

Use a ustaticQuery hook (or the traditional StaticQuery) to create a GraphQL query and use the same JSX structure to return the posts. Something like:

const ArticleListing = ({ data, location, nodes  }) => {
const siteTitle = data.site.siteMetadata.title || ``
  const data = useStaticQuery(graphql`
   query {
    site {
      siteMetadata {
        title
      }
    }

    allMarkdownRemark(
        sort: { fields: [frontmatter___date], 
    }) {
      nodes {
        id
        fields {
          slug
        }
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          title
          description
          tages
          featuredimage {
            childImageSharp {
              gatsbyImageData(
                width: 500
                blurredOptions: {width: 100}
                placeholder: BLURRED
                transformOptions: {cropFocus: CENTER}
                aspectRatio: 0.7
              )
            }
          }
        }
      }
    }    
  } 
`)


const posts = data.allMarkdownRemark.nodes

if (post.length === 0) { // is message tell us if there no post being display post this message.
  return (
    <div id="content">
        <Layout location={location} title={siteTitle}>
          <Seo title="All posts" />
          <p>There were no blogs found. Our team is working hard to create content you will enjoy.</p>
        </Layout>
    </div>
  )
}

return ( // This where you be rendering your post.
  <div id="content">
    <Layout location={location} title={siteTitle}>
      <Seo title="All posts" />
      {/* <Bio /> */}
      <ol className="inline_blog" style={{ listStyle: `none` }}>
      {posts.map(function (post) {
              const title = post.frontmatter.title || post.fields.slug;

              let image = getImage(nodes.frontmatter.featuredimage);
              let alt = post.frontmatter.title;

              return (
                  <li key={post.fields.slug}>
                      <article
                          className="post-list-item"
                          itemScope
                          itemType="http://schema.org/Article"
                      >

                          <header>
                              <div className="cover_image">
                                  <CoverImage
                                      image={image}
                                      alt={alt} />
                              </div>

                              <small>
                                  {post.frontmatter.date}
                              </small>

                              <h2 className="post_heading_title">
                                  <Link to={post.fields.slug} itemProp="url">
                                      <span
                                          itemProp="headline">
                                          {title}
                                      </span>
                                  </Link>
                              </h2>
                          </header>

                          <section>
                              <p dangerouslySetInnerHTML={{
                                  __html: post.frontmatter.description || post.excerpt,
                              }}
                                  itemProp="description" />
                          </section>
                      </article>
                  </li>
              );
          })}
      </ol>
    </Layout>
  </div>
)
}

export default ArticleListing