I am trying to fetch some data from my Prismic CMS , using GraphQL and Gatsby.js , this is what I am trying to fetch :
{
allPrismicLastPosts {
nodes {
data {
blog_title {
text
}
blog_paragraph {
text
}
links {
blog {
document {
... on PrismicBlog {
data {
post_img {
url
}
post_title {
text
}
post_paragraph {
text
}
tag
}
}
... on PrismicCulture {
data {
tag
culture_image {
url
}
culture_paragraph {
text
}
culture_title {
text
}
}
}
}
}
}
}
}
}
}
I am passing these data to a children :
const Homepage = ({data}) => {
const docs = data.allPrismicLastPosts
return(
<PageHome>
<LastPosts docs={docs}/>
</PageHome>
)
}
So I can use these data in the LastPosts component :
{docs.nodes.map((post)=>
(
<Posts>
<PostsTitle>
{post.data.blog_title.text}
</PostsTitle>
<PostsParagraph>
{post.data.blog_paragraph.text}
</PostsParagraph>
//This is what i am trying to do !!
{post.data.links.blog.document.map((test)=>
(
<GridPosts>
<GridPost>
<img src={Post2} alt='Post1' />
<FlexPost>
<PostTitle>
TEST
</PostTitle>
<PostParagraph>
A lot of different components that will help you create the perfect look for your project
</PostParagraph>
<PostTag>
Fiction
</PostTag>
</FlexPost>
</GridPost>
</GridPosts>
)
)}
</Posts>
))}
What I want to do is this :
{post.data.links.blog.document.map((test)=>
(
<GridPosts>
<GridPost>
<img src={Post2} alt='Post1' />
<FlexPost>
<PostTitle>
TEST
</PostTitle>
<PostParagraph>
A lot of different components that will help you create the perfect look for your project
</PostParagraph>
<PostTag>
Fiction
</PostTag>
</FlexPost>
</GridPost>
</GridPosts>
)
)}
Eventually I get an error Cannot read properties of undefined (reading 'document')
How can I fix this ? and How can I fetch those data , something like ... On PrismicBlog data ?
As shown in your other question (how to fetch only specific data from graphql query), links is an array so unless you loop through it or you access to a specific position you can't do:
post.data.links.blog.document.map((test)
I guess you are trying to do:
post.data.links[0].blog.document.map((test)
According to links structure, it seems to be an array of 1 item.
Try to debug your loops by adding a breakpoint or console.logs before returning the JSX, so you will be able to see what you are looping through:
{
post.data.links.blog.document.map((test) => {
console.log(test);
return (
<GridPosts>
<GridPost>
<img src={Post2} alt="Post1" />
<FlexPost>
<PostTitle>TEST</PostTitle>
<PostParagraph>
A lot of different components that will help you create the
perfect look for your project
</PostParagraph>
<PostTag>Fiction</PostTag>
</FlexPost>
</GridPost>
</GridPosts>
);
});
}