Adding and retrieving nested comments

Overview

This tutorial explains how to add and retrieve nested or hierarchical comments in the commenting function using the Activity module.

What you'll learn

For demonstration purposes, we will be adding comments to a post in the content group "News" entitled "Welcome to Kuroco" (content ID = 4).
This will be done in the following steps:

• Create the activity structure
• Set up the API and endpoints
  • Add comments
  • Retrieve comments
• Add nested comments from the Swagger UI
• Retrieve nested comments from the Swagger UI

Before you start

To begin this tutorial, you should have an existing content post for adding comments. For a detailed guide on how to create content in Kuroco, see Tutorial: Creating content list page with Kuroco and Nuxt.js.

Activity settings

In the left sidebar menu, select [Activity settings].

On the Activity settings list screen, click [Add] in the upper right corner.

Input the following:

Field	Value
Module	Content
Title	Hierarchical comment function
Status	Enabled
API request restriction	View: Allowed Post: Allowed
Hierarchy	Enabled

tip

The above authorization settings are used to faciliate operation checks only. We recommend setting tighter restrictions for your live site.

When you are done, click [Add] to save the settings.
You will be redirected to the Activity settings list screen. Note down the ID for later use.

API settings

Add new API

Next, create a new endpoint to allow non-logged-in users to comment.

On the Default endpoint list screen, click [Add].

In the dialog box, input the following and click [Add]:

Field	Value
Title	Comments
Version	1.0
Description	For testing comment hierarchy.

CORS settings

Then, configure the CORS settings. On the Comments endpoint list screen, click [Operation CORS].

Under "CORS_ALLOW_ORIGINS", click [Add Origin] and input the following:

• https://******.g.kuroco-mng.app (Your admin panel URL)

Under "CORS_ALLOW_METHODS", click [Add Method] and add the following methods:

• GET
• POST
• OPTIONS

When you are done, click [Save].

Endpoint creation

Now, we are ready to set up the endpoints. You will need to create two endpoints, comment/insert for adding comments and comment/list for retrieving them.

On the Comment endpoint list screen, click [Add new endpoint].

comment/insert

Configure the settings dialog as follows:

Field	Sub-field	Value
Path		comment/insert
Model	Category	Activity
	Model	Comment, v1
	Operation	insert
API request restriction		None
Basic settings	id	Enter your activity settings ID (35 in this example.)

When you are done, click [Add].

comment/list

Configure the settings dialog as follows:

Field	Sub-field	Value
Path		comment/list
Model	Category	Activity
	Model	Comment, v1
	Operation	list
API request restriction		None
Basic settings	id	Enter your activity settings ID (35 in this example.)
	module_type	topics

When you are done, click [Add].

Adding hierarchical comments

Now, use the Swagger UI to add hierarchical comments to the target content post.

For this tutorial, we are adding the sample comment structure below to the post with content ID (topic ID) = 4.

Sample comment structure

       1            9       12     13
     /  \          / \            /
    2    3        10 11          14
  / | \  | \
 4  5  6 7  8

For each comment tree, send the following request to the comment/insert endpoint, where the N in commentN is the number of the top-level comment (in this example, N = 1, 9, 12, and 13).

{
  "module_id": 4,
  "name": "Taro Diverta",
  "mail": "taro@diverta.co.jp",
  "note": "CommentN"
}

You should see the following response message:

To add child comments 2 and 3 to the parent comment 1, go to [Activity] -> [Hierarchichal comment function] in the sidebar menu and click [Comment1].

On the comment editor screen, verify the comment ID in the URL.

Then, return to the Swagger UI screen and send a request to the comment/insert endpoint for each child comment, adding the parameter parent_comment_id. The M in CommentM is the number of the child comment.

{
  "module_id": 4,
  "name": "Taro Diverta",
  "mail": "taro@diverta.co.jp",
  "note": "CommentM",
  "parent_comment_id": X
}

Repeat this for all the other child comments.

tip

The comment API has a limit of five requests per 5 minutes. If you exceed the limit, you will see the following error:

Retrieving hierarchical comments

Relevant parameters

To retrieve comments with a hierarchical structure, use a combination of the following parameters: cnt, pageID, children_cnt, children_pageID, root, depth.

Parameter	Description
cnt	The number of top-level comments per page.
pageID	The page where top-level comments will be displayed.
children_cnt	The number of child comments per page.
children_pageID	The page where child comments will be displayed.
root	The root comment.
depth	The number of child comment levels to retrieve.

Swagger UI

As an example, we will send a fetch request with cnt=2, pageID=1, and depth=2.

Go to the Comments Swagger UI screen.

Select the comment/list endpoint and click [Try it out].

Input the following:

Parameter	Value
cnt	2
pageID	1
depth	2
module_id	4 (content ID or topic ID of the target post)

When you are done, click [Execute].

Verify the response body.

The response should take this structure:

"list": [
    {
      ・・・,
      "note": "Comment1",
      ・・・,
      "children": [
        {
          ・・・,
          "note": "Comment2",
          ・・・,
        },
        {
          ・・・,
          "note": "Comment3",
          ・・・,
        }
      ]
    },
    {
      ・・・,
      "note": "Comment9",
      ・・・,
      "children": [
        {
          ・・・,
          "note": "Comment10",
          ・・・,
        },
        {
          ・・・,
          "note": "Comment11",
          ・・・,
        }
      ]
    }
]

Or represented as comment trees:

cnt=2, pageID=1, and depth=2

      1            9 
     / \          / \ 
    2   3        10 11 

Example parameter combinations and resulting comment structures

Below are some examples of how to set the parameters and the comment trees that are retrieved as a result.

All data

       1            9       12     13
     /  \          / \            /
    2    3        10 11          14
  / | \  | \
 4  5  6 7  8

cnt=2 and pageID=1

       1            9 
     /  \          / \ 
    2    3        10 11 
  / | \  | \
 4  5  6 7  8

cnt=2 and pageID=2

       12     13
             /
            14

cnt=2, pageID=1, and depth=2

      1            9 
     / \          / \ 
    2   3        10 11 

cnt=2, pageID=1, and root=2

    2   
  / | \  
 4  5  6 

cnt=2, pageID=1, children_cnt=1, children_pageID=1

      1       9 
     /       /   
    2       10 
   / 
  4

cnt=2, pageID=1, children_cnt=1, children_pageID=2

     1       9 
      \       \ 
       3      11 
        \
         8

Related documents

• Add comments function to content with Kuroco and Nuxt.js