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
)
}
}
}
}
}
}
`CodePudding user response：
I recommend doing the following troubleshooting:
- Testing your query through
http://localhost:8000/___graphql?That should show if you've got the query correct. It may beallMarkdownRemark.edges.nodesornode vs. nodes. (the explorer is very useful for generating a queries.) (https://www.gatsbyjs.com/docs/how-to/querying-data/running-queries-with-graphiql/) - console.log(data) to see where/if posts comes up within it
- If all else fails you can run
gatsby cleanin the CL without worry of breaking anything. (https://www.gatsbyjs.com/docs/reference/gatsby-cli/#clean)
CodePudding user response：
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
ArticleListingcomponent insidesrc/templatesUse a
ustaticQueryhook (or the traditionalStaticQuery) 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