2022-02-07T23:58:48.449Z

Building a comment system for my Strapi blog

When I decided to create this site, I wanted to create a community around some of the things that I'm passionate about. While I personally have a very small social media footprint, I enjoy engaging with creators, and will like, comment, or share content that I find interesting or valuable. As I start to fill this blog with new posts, I want to make sure that I'm able to easily connect with readers, answer questions and get feedback.

So I decided to build a comment system!

Requirements

Here are the packages that I had before getting started.

 $ pip install fastapi
 $ yarn add strapi-plugin-comments@latest
 

Navigate to that Strapi package and run this code

$ yarn add strapi-plugin-comments@latest

Once you have this installed, build and develop that yarn package per the instructions in the link

$ yarn build && yarn develop

I want to learn more about GraphQL, so I'm also adding that to the mix

$ yarn add @strapi/plugin-graphql

If you're new to Strapi and GraphQL, the most important thing here will be successfully creating a comment, deleting a comment, and getting a list frrom comments in the GraphQL playground. All of the instructions for this live in the Strapi Comments Plugin documentation - and I'll show you the syntax later in this article.

Rendering comments on the frontend

So FastAPI and Jinja2 make it extremely easy to pass data between the server and the client. I pass the article_id and the response to the findAllFlat comment query to my blog template. Then I use something like this code to render my code on the page.

<ul id='comments'>
{% for comment in comments %}
{% for comment in comments %}
   <li>
      <h3> {{comment.author}} </h3>
      <p> {{comment.content}} </p>
   </li>
{% endfor %}
</ul>

I adapted this form to add the comment:

<form action="" onsubmit="addComment(event)">
    <input type="text" id="author" autocomplete="off"/>
    <input type="text" id="content" autocomplete="off"/>
    <button>Add comment</button>
</form>

I was pretty stuck on what to do next, so I went on stackoverflow

If you check out any of the blog posts on my site, you will see a space to add a comment. Because I'm using websockets, data is instantly updated across all clients. Right now, there are still some styling issues when a comment is posted, but if you refresh the page the comment should pop up like normal!

Would love to beta test this with anyone who's read the article - please feel free to post a comment!

Join the Conversation!

Comments

  • avatar

    randomdev

    Great job, dude!

© 2022 All rights reserved. – Designed & Coded by Adam Jones