Cannot access object data in Gatsby page query

Question

I am using Prismic and Gatsby for a site and am having trouble with a page template. The graphql query works but I cannot access items within the data object.

This is how my template is set up:

const ContactPage = ({ data: prismicContactPage }) => {
  const { data } = prismicContactPage;
  console.log(prismicContactPage); // logs the object and all its data
  console.log(data); // undefined

  return (
    <Layout>
      <SEO key="contact-seo" title="" />
      <PageBody>
          {data.title.text} // data is undefined
          {prismicContactPage.data.title.text} // prismicContactPage.data is undefined
      </PageBody>
    </Layout>
  );
};

export default ContactPage;

export const pageQuery = graphql`
  query ContactQuery {
    prismicContactPage {
      data {
        title {
          text
        }
      }
    }
  }
`;

I can log the query object and all the correct information is present but for whatever reason I can't get to the data within the object.

If I change the component to:

const ContactPage = ({ data: {prismicContactPage: data} }) => {
  console.log(data); // logs correct info

  return (
    <Layout>
      <SEO key="contact-seo" title="" />
      <PageBody>
          {data.title.text} // undefined
      </PageBody>
    </Layout>
  );
};

I can get 'further' into the object but using data.title.text ends up with TypeError: data.title is undefined

Deleting the cache and rebuilding queries doesn't seem to help and there are no problems with my graphql query when I use the graphql explorer. I am hoping I am missing something basic but I cannot for the life of me figure out what is wrong.

Derek Nguyen · Accepted Answer · 2019-01-29T08:14:09.160

With this query

export const pageQuery = graphql`
  query ContactQuery {
    prismicContactPage {
      data {
        title {
          text
        }
      }
    }
  }
`;

I'd expect the data to be passed into my component like this:

props.data.prismicContactPage.data.title.text

So perhaps you meant to extract data like this?

// extract props.data.prismicContactPage
const ContactPage = ({ data: { prismicContactPage } }) => {
  console.log(prismicContactPage.data.title.text)
  return ...
}

or

// extract props.data.prismicContactPage.data
const ContactPage = ({ data: { prismicContactPage: { data } } }) => {
  console.log(data.title.text)
  return ...
}

When you write ({ data: prismicContactPage }) => ..., it is equivalent to

const prismicContactPage = this.props.data`;
const { data } = prismicContactPage; // undefined because there's no this.props.data.data

And ({ data: {prismicContactPage: data} }) => ... is equivalent to

const data = this.props.data.prismicContactPage;
console.log(data.title.text) // undefined because there's no this.props.data.prismicContactPage.title.text

I think both are not the data you expected.

Thank you Derek! `{ data: { prismicContactPage } }` this was the fix, missing the extra curly braces. — gscr, Jan 30 '19 at 02:09
Glad it helped! Destructuring syntax is really hard to read sometimes — Derek Nguyen, Jan 30 '19 at 02:53

Cannot access object data in Gatsby page query

1 Answers1