Rendering Contentful data into Gatsby page but getting an error
Question
I'm trying to load an about page from Contentful with gatsby, but I'm running into an error when loading the image data, stating:
data.allContentfulAbout is undefined
Could someone correct my code to have both the image load and then the raw text from contentful load where the text goes?
import React from "react";
import { Link, graphql } from "gatsby";
import SEO from '../components/seo'
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import Layout from "../components/layout";
import Head from '../components/head'
import * as aboutStyles from '../styles/about.module.scss'
const AboutPage = () => {
const data = graphql`
query {
allContentfulAbout {
nodes {
bioImage {
title
gatsbyImageData(
cropFocus: CENTER
resizingBehavior: SCALE
width: 500
placeholder: BLURRED
layout: FULL_WIDTH
)
}
aboutText {
raw
}
}
}
}
`
return (
<div>
<Layout>
<SEO title="About" />
<Head title="About" />
<div className={aboutStyles.parent}>
<section className={aboutStyles.container}>
<div className={aboutStyles.image}>
<GatsbyImage image={getImage(data.allContentfulAbout.node.bioImage.gatsbyImageData)} alt={data.allContentfulAbout.node.bioImage.title}/>
</div>
<div className={aboutStyles.info}>
<p>TEXT GOES HERE</p>
</div>
</section>
</div>
</Layout>
</div>
)
}
export default AboutPage
Another page is querying blog posts and works fine. The code is here:
const BlogPage = () => {
const data = useStaticQuery(graphql`
query {
allContentfulBlogPost ( sort: { fields: publishedDate, order: DESC } ) {
edges {
node {
title
slug
publishedDate(formatString:"MMMM Do, YYYY")
}
}
}
}
`)
console.log(data)
return (
<div>
<Layout>
<Head title="Blog" />
<h1>Blog</h1>
<ol className={blogStyles.posts}>
{data.allContentfulBlogPost.edges.map((edge) => {
return (
<li className={blogStyles.post}>
<Link to={`/blog/${edge.node.slug}`}>
<h2>{edge.node.title}</h2>
<p>{edge.node.publishedDate}</p>
</Link>
</li>
)
})}
</ol>
</Layout>
</div>
)
}
My graphql query for the about image in localhost8000 gets back data. Here it is:
query MyQuery {
allContentfulAbout {
nodes {
bioImage {
gatsbyImageData(
cropFocus: CENTER
resizingBehavior: SCALE
width: 500
placeholder: BLURRED
layout: FULL_WIDTH
)
title
}
aboutText {
raw
}
}
}
}
2 answers
solution1
0 2022-07-05 07:28:43
我认为您没有将查询包装在“useStaticQuery”挂钩中。
solution2
0 2022-07-09 16:20:44
You are using a page query with the notation of a static query .
Choose one of them, but in this case, I'd suggest the page query:
import * as React from "react";
import { graphql } from "gatsby";
const AboutPage = ({ data }) => {
console.log("your data is", data);
return (
<div>
<Layout>
<SEO title="About" />
<Head title="About" />
<div className={aboutStyles.parent}>
<section className={aboutStyles.container}>
<div className={aboutStyles.image}>
<GatsbyImage
image={getImage(
data.allContentfulAbout.node.bioImage.gatsbyImageData
)}
alt={data.allContentfulAbout.node.bioImage.title}
/>
</div>
<div className={aboutStyles.info}>
<p>TEXT GOES HERE</p>
</div>
</section>
</div>
</Layout>
</div>
);
};
export const query = graphql`
query {
allContentfulAbout {
nodes {
bioImage {
title
gatsbyImageData(
cropFocus: CENTER
resizingBehavior: SCALE
width: 500
placeholder: BLURRED
layout: FULL_WIDTH
)
}
aboutText {
raw
}
}
}
}
`;
export default AboutPage;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.