Question 22421 in SEO Question posted in
Some basic information to get you started with this can be found here.

Rendering Contentful data into Gatsby page but getting an error – SEO

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
      }
    }
  }
}
Tags:

2

Answers


  1. 0

    I think you didn’t wrap the query in the "useStaticQuery" hook.

    Login or Signup to reply.
  2. 0

    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;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search