-1

I am building travel blog using React as frontend Javascript framework along with GraphQL. I am doing this project by myself as a pilot test and I am currently in a phase of translating photoshop design in HTML/CSS/JSX.

What bothers me is what will be the best way to store blog posts in database, fetching them and showing to the end user?

Blog post contains: text, categories, embedded pinterest/instagram/facebook links, images hosted locally, paragraphs, bullets etc.

Database entry should not be coupled with React so if I decide to change frontend framework in the future I could do this more easily. On the other hand, React strongly discourages using .dangerouslysetinnerhtml method which could be very handy in this situation - I would store post content as pure html in db and fetch it using graphql. Let's assume that all blog posts will have the same CSS rules!

Bip
  • 109

1 Answers1

3

I typically use markdown for blog posts' main content. This sits alongside the blog post's other columns (title, slug, categories, etc). The perks of using markdown is that it can be considered a subset of the visual elements that HTML offers, without giving writers access to the vastness of HTML (<script>, <title>, <style>, etc). As you've duly noted, using React's dangerouslySetInnerHTML is indeed dangerous, sometimes even if you're transpiling markdown into renderable HTML.

There's a React package, react-markdown, that can handle transpiling markdown with a simple React component. There are some things to note when preventing injected HTML using react-markdown, which are discussed in this Github issue.

Daniel
  • 148