Problem with pulling data from Graphql into Gatsby - graphql

Question

I'm pretty new here to gatsby/programming and i was playing around with the gatsby. I have below issue and I would appreciate if you could let me know where does it goes wrong? Below is my code.
Problem 1: Why i can't return/access the {post1.categories.nodes.name} ? It shows nothing on my page.
Note that there was no problem for me to access {post.video.videoSource} so i guess my Graphql worked fine but when i tried with {post1.categories.nodes.name}, it was literally blank.
Any suggestions? Thank you very much.
const BlogIndex = ({
data,
pageContext: { nextPagePath, previousPagePath },
}) => {
const posts = data.allWpPost.nodes
if (!posts.length) {
return (
<Layout isHomePage>
<Seo title="All posts" />
<Bio />
<p>
No blog posts found. Add posts to your WordPress site and they'll
appear here!
</p>
</Layout>
)
}
return (
<Layout isHomePage>
<Seo title="All posts" />
{/* <Bio /> */}
<Grid container rowSpacing={5} column spacing={5}>
<Grid item xs={12} sm={3} md={3} lg={3}>
<Paper>
<ol style={{ listStyle: `none` }}>
{posts.map(post1 => {
return <li>{post1.categories.nodes.name}</li>
})}
</ol>
</Paper>
</Grid>
<Grid item xs={12} sm={9} md={9} lg={9}>
<Paper>
<ol style={{ listStyle: `none` }}>
{posts.map(post => {
const hasVideoUrl = post.video.videoSource
if (hasVideoUrl !== null) {
return (
<li key={post.uri}>
<article
className="post-list-item"
itemScope
itemType="http://schema.org/Article"
>
<header>
<small>{post.video.videoSource}</small>
<small>{post.video.videoUrl}</small>
{/* <ReactPlayer url={post.video.videoUrl} /> */}
</header>
</article>
</li>
)
} else {
return null
}
})}
</ol>
</Paper>
</Grid>
</Grid>
{previousPagePath && (
<>
<Link to={previousPagePath}>Previous page</Link>
<br />
</>
)}
{nextPagePath && <Link to={nextPagePath}>Next page</Link>}
</Layout>
)
}
export default BlogIndex
export const pageQuery = graphql`
query WordPressPostArchive($offset: Int!, $postsPerPage: Int!) {
allWpPost(
sort: { fields: [date], order: DESC }
limit: $postsPerPage
skip: $offset
) {
nodes {
excerpt
uri
date(formatString: "MMMM DD, YYYY")
title
video {
videoSource
videoUrl
}
categories {
nodes {
name
}
}
}
}
}
`
Problem 2 [Added 2 July 2022]:
<ul>
{wpPosts.map(wpPost => {
wpPost.tags.nodes.map(tag => {
console.log(tag.name)
if (tag.name === "Blog") {
return (
<div>
<li>{tag.title}</li>
</div>
)
}
})
})}
</ul>
const data = useStaticQuery(
graphql`
query {
allWpPost(sort: { fields: date, order: DESC }, limit: 10) {
nodes {
excerpt
slug
uri
video {
videoTitle
videoUrl
}
title
date(formatString: "MMMM DD, YYYY")
tags {
nodes {
name
}
}
}
}
}
`
)
const wpPosts = data.allWpPost.nodes

Answer 1

Problem 1: Why i can't return/access the {post1.categories.nodes.name}
? It shows nothing on my page.
nodes (in post1.categories.nodes.name) is likely to be an array, so you will need to loop through it or access a specific position:
return <li>{post1.categories.nodes[0].name}</li>
Depending on your data structure you'll need to loop or just access to the first position. Without knowing your data it's difficult to guess.