Gatsby Js, Graph QL - mapping through query, using MarkdownRemark

Question

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!

Answer 1

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