How to fetch data from Prismic with GraphQL accordingly

Question

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 ?

Answer 1

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>
    );
  });
}