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!

  • 2
    So what's your question? – whatsisname Sep 10 '18 at 17:24
  • How to store blog posts in database if frontend is in react and backend in node, having in mind that frontend could change anytime in the future? – Bip Sep 10 '18 at 17:30

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.

  • What is the benefit of using react-markdown comparing with setting inner html? – Bip Sep 10 '18 at 18:26
  • @Bip The benefit is that your giving your blog writers a small subset of the features of HTML. It includes bulleted lists, headings, links, etc. You don't want your blog writers to be able to write <style> and <script> tags, do you? – Daniel Pendergast Sep 10 '18 at 19:22
  • Correct! How can I embed i.e. Facebook post using react-facebook-sdk in markdown to be part of the post? – Bip Sep 10 '18 at 19:23
  • @Bip markdown is used purely for content formatting. It won't help you with any JSX syntax or React components. – Daniel Pendergast Sep 10 '18 at 19:32
  • You can handle react-facebook-sdk logic alongside react-facebook-sdk. Maybe a few new database columns could help with that. – Daniel Pendergast Sep 10 '18 at 19:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.