TypeError: Cannot read property 'Title' of undefined

[jordan-miguel]

Issue

I can't successfully render my queried data inside of my component.

Steps to reproduce

1. I test my graphQL query that will be used to pull in data from my CMS (sanity)
2. I attempt to render this in my component
3. I run gatsby develop
4. I can see TypeError: Cannot read property 'Title' of undefined error on my browser

I am using these docs as a reference.

Code

export const query = graphql`
  query {
    allSanityPosts {
      edges {
        node {
          Title
        }
      }
    }
  }
`;

const singlePost = ({ data }) => (
    <Layout>
        <Header />
        <div>
        <h1>{data.post.Title}</h1>
        </div>
    </Layout>
)

export default singlePost

Error

[KyleAMathews]

Does the query work in graphiql?

…

On Wed, Mar 10, 2021, 4:28 PM Jordan Miguel ***@***.***> wrote: Issue I can't successfully render my queried data inside of my component. Steps to reproduce 1. I test my graphQL query that will be used to pull in data from my CMS (*sanity*) 2. I attempt to render this in my component 3. I run gatsby develop 4. I can see TypeError: Cannot read property 'Title' of undefined error on my browser I am using these docs <https://www.gatsbyjs.com/docs/recipes/querying-data/>as a reference. Code export const query = graphql` query { allSanityPosts { edges { node { Title } } } } `; const singlePost = ({ data }) => ( <Layout> <Header /> <div> <h1>{data.post.Title}</h1> </div> </Layout> ) export default singlePost Error [image: Screenshot 2021-03-10 at 23 27 50] <https://user-images.githubusercontent.com/14114089/110711925-425a0380-81f8-11eb-9231-2baf09a2bf37.png> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#30180>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAARLB6A4W3DR47FESYXUZ3TC76DHANCNFSM4Y7DDA6A> .

[jordan-miguel]

Yes it does :)

[kimbaudi]

hey @jordan-miguel - i think you need to change from data.post.Title to data.sanityPosts.Title

---

Also, i think you can shorten your query from this:

export const query = graphql`
  query {
    allSanityPosts {
      edges {
        node {
          Title
        }
      }
    }
  }
`;

to this:

export const query = graphql`
  query {
    allSanityPosts {
      nodes {
        Title
      }
    }
  }
`;

[kimbaudi]

@jordan-miguel - can you try data.allSanityPosts.edges.node or data.allSanityPosts.nodes (if you changed the query like i suggested earlier)? Also try to add a console.log(props) to singlePost and see if props.data is returning a value.

const singlePost = (props) => {
console.log(props)
const {data} = props
return (
    <Layout>
        <Header />
        <div>
        <h1>{data.post.Title}</h1>
        </div>
    </Layout>
)
}

I'm starting to suspect that you are receiving the error because you are using the allSanityPosts graphql query in a non-page component like a template, which wouldn't work. Where is the file located where you are using allSanityPosts? Is it under src/pages or src/templates or somewhere else?

[jordan-miguel]

@kimbaudi I'm able to successfully retrieve the data within the component with data.sanityPosts.Title & data.sanityPosts.body

The only issue I'm having is that my query retrives just a single post, regardless of whether or not I'm on /blog/post-1 or /blog/post-2 - (see code below).

I need to ensure that a specific post is fetched, I believe this can be achieved by adding a variable to my query, more specifically the id variable - based on these docs. Does this make sense?

export const query = graphql`
  query {
    sanityPosts {
      Title
      body
    }
  }
`;

const singlePost = ({ data }) => (
    <Layout>
        <Header />
        <div>
        <h1>{data.sanityPosts.Title}</h1>
        <p>{data.sanityPosts.body}</p>
        </div>
    </Layout>
)

export default singlePost

[kimbaudi]

@jordan-miguel - it is not enough for you to change allSanityPosts query to sanityPosts query. you also need to pass a parameter to your sanityPosts query so it can filter the correct post. you need to update sanityPosts to something like this:

export const query = graphql`
  query($id: String!) {
    sanityPosts(id: { eq: $id }) {
      Title
      body
    }
  }
`;

[jordan-miguel]

@kimbaudi Now I'm seeing the error TypeError: Cannot read property 'sanityPosts' of undefinded

I'm not sure why, I still have this problem - Thank you for the help, and aplogies for the questions...I just don't understand why there are so many undefined properties.

export const query = graphql`
  query($id: String!) {
    sanityPosts(id: { eq: $id }) {
      Title
      body
    }
  }
`;

const singlePost = ({ data }) => (
    <Layout>
        <Header />
        <div>
        <h1>{data.sanityPosts.Title}</h1>
        <p>{data.sanityPosts.body}</p>
        </div>
        <Footer />
    </Layout>
)

export default singlePost

[kimbaudi]

sorry I can't help anymore. I'm not entirely sure why you're getting the errors.