Estoy tratando de obtener algunos datos de mi Prismic CMS, usando GraphQL y Gatsby.js, esto es lo que estoy tratando de obtener:
{ 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 } } } } } } } } } }Estoy pasando estos datos a un niño:
const Homepage = ({data}) => { const docs = data.allPrismicLastPosts return( <PageHome> <LastPosts docs={docs}/> </PageHome> ) } Entonces puedo usar estos datos en el componente LastPosts :
{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> ))}Lo que quiero hacer es esto:
{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> ) )} Eventualmente recibo un error Cannot read properties of undefined (reading 'document') ¿Cómo puedo solucionar esto? y ¿Cómo puedo obtener esos datos, algo así como ... On PrismicBlog ?
Como se muestra en su otra pregunta ( cómo obtener solo datos específicos de la consulta de graphql ), los links son una matriz, por lo que, a menos que lo recorra o acceda a una posición específica, no puede hacerlo:
post.data.links.blog.document.map((test)Supongo que estás tratando de hacer:
post.data.links[0].blog.document.map((test) De acuerdo con la estructura de los links , parece ser una matriz de 1 elemento.
Intente depurar sus bucles agregando un punto de interrupción o console.logs antes de devolver el JSX, para que pueda ver lo que está recorriendo:
{ 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> ); }); }