0
200
ViewsGatsby Js, Graph QL - mapping through query, using MarkdownRemark
I am new to Graphql and Gatsby so I am still learning how to access things in graphql.
I am trying to turn my markdown table into html. Currently, my query looks like so:
const data = useStaticQuery(graphql`
query {
allContentfulQuestionAnswer {
edges {
node {
question
id
answer {
answer
childrenMarkdownRemark {
html
id
}
}
}
}
}
}
`)
I am trying to map through the data to get both the questions and the answers. Like so:
<>
<h1>FREQUENTLY ASKED QUESTIONS</h1>
{data.allContentfulQuestionAnswer.edges.map( ({ node, index }) => (
<div className="repairCost">
<p>{ node.question }</p>
<p>{ node.answer.answer }</p>
</div>
))}
I have tried changing { node.answer.answer } to { node.answer.answer.childrenMarkdownRemark } ...etc
When I go into the graphql playground, and I create the query:
allMarkdownRemark {
edges {
node {
html
}
}
}
}
and map over that. I am able to get the markdown in html form.. however, I need it to be displayed with the question and the answer together.
Currently it looks like:
Would appreciate all or any help!
Thank you so much!
1 answers
Answer question0
Use:
<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>
))}
Your loop looks good, however, you are not rendering the answer itself because you need to render HTML, that's why dangerouslySetInnerHTML is useful.
Since the response you are fetching is markdown-like, you may need to use a markdown interpreter in order to display it properly. There are a lot of libraries, but I will base this answer in 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>
));
}