-1

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
      }
    }
  }
}
kenton
  • 11
  • 4
  • The error is probably in the gatsby-config. It seems like you're somehow not connecting correctly to your contentful data source. Also, it should be allContentfulAbout.nodes.otherstuff instead of .node.otherstuff – ovalb Jul 02 '22 at 20:49
  • Thanks for catching the nodes! I have contentful working correctly! It's loading data on another page. Any other possibilities? – kenton Jul 03 '22 at 13:47
  • Show the page where the data is loading properly then.Also you could copy and paste the graphql query in the graphql endpoint e.g. (localhost/___graphql) and see whether it gives data back – ovalb Jul 04 '22 at 09:35
  • Added both! The graphql query gets back all the image data completely so I'm definitely puzzled by this. Thanks for taking a look! – kenton Jul 04 '22 at 20:50

2 Answers2

0

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

ovalb
  • 555
  • 6
  • 15
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;
Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67