0
202
VistasGatsby Js, Graph QL: mapeo a través de consultas, usando MarkdownRemark
Soy nuevo en Graphql y Gatsby, así que todavía estoy aprendiendo cómo acceder a cosas en graphql.
Estoy tratando de convertir mi tabla de rebajas en html. Actualmente, mi consulta se ve así:
const data = useStaticQuery(graphql` query { allContentfulQuestionAnswer { edges { node { question id answer { answer childrenMarkdownRemark { html id } } } } } } `)Estoy tratando de mapear los datos para obtener tanto las preguntas como las respuestas. Al igual que:
<> <h1>FREQUENTLY ASKED QUESTIONS</h1> {data.allContentfulQuestionAnswer.edges.map( ({ node, index }) => ( <div className="repairCost"> <p>{ node.question }</p> <p>{ node.answer.answer }</p> </div> ))} He intentado cambiar { node.answer.answer } a { node.answer.answer.childrenMarkdownRemark } ... etc.
Cuando entro en el área de juegos de graphql y creo la consulta:
allMarkdownRemark { edges { node { html } } } }y mapa sobre eso. Puedo obtener el descuento en formato html. Sin embargo, necesito que se muestre con la pregunta y la respuesta juntas.
Actualmente se ve como:
Agradecería todo o cualquier ayuda!
¡Muchas gracias!
1 Respuestas
Responde la pregunta0
Usar:
<h1>FREQUENTLY ASKED QUESTIONS</h1> {data.allContentfulQuestionAnswer.edges.map( ({ node, index }) => ( <div className="repairCost"> <p>{ node.question }</p> <p dangerouslySetInnerHTML={{__html: node.answer.childrenMarkdownRemark.html }} /> </div> ))} Su ciclo se ve bien, sin embargo, no está representando la answer en sí porque necesita representar HTML, es por eso que dangerouslySetInnerHTML es útil.
Dado que la respuesta que está obteniendo es similar a una rebaja, es posible que deba usar un intérprete de rebajas para mostrarla correctamente. Hay muchas bibliotecas, pero basaré esta respuesta en markdown-to-jsx :
import Markdown from "markdown-to-jsx"; <h1>FREQUENTLY ASKED QUESTIONS</h1>; { data.allContentfulQuestionAnswer.edges.map(({ node, index }) => ( <div className="repairCost"> <p>{node.question}</p> <Markdown>{node.answer.childrenMarkdownRemark.html}</Markdown> </div> )); }