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:

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].

Image from Gyazo

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

Image from Gyazo

Input the following:

FieldValue
ModuleContent
TitleHierarchical comment function
StatusActive
Authorization settings
  • API request restriction: Unlimited
  • Posting restriction: Publish (without approval)
HierarchyEnabled

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

Image from Gyazo

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.

Image from Gyazo

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].

Image from Gyazo

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

FieldValue
TitleComments
Version1.0
DescriptionFor testing comment hierarchy.

Image from Gyazo

CORS settings

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

Image from Gyazo

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].

Image from Gyazo

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].

Image from Gyazo

comment/insert

Configure the settings dialog as follows:

FieldSub-fieldValue
Pathcomment/insert
ModelCategoryActivity
ModelComment, v1
Operationinsert
API request restrictionNone
Basic settingsidEnter your activity settings ID (35 in this example.)

Image from Gyazo Image from Gyazo

When you are done, click [Add].

comment/list

Configure the settings dialog as follows:

FieldSub-fieldValue
Pathcomment/list
ModelCategoryActivity
ModelComment, v1
Operationlist
API request restrictionNone
Basic settingsidEnter your activity settings ID (35 in this example.)
module_typetopics

Image from Gyazo Image from Gyazo

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:

Image from Gyazo

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].

Image from Gyazo

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

Image from Gyazo

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
}

Image from Gyazo

Repeat this for all the other child comments.

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

Image from Gyazo

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.

ParameterDescription
cntThe number of top-level comments per page.
pageIDThe page where top-level comments will be displayed.
children_cntThe number of child comments per page.
children_pageIDThe page where child comments will be displayed.
rootThe root comment.
depthThe 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.

Image from Gyazo

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

Image from Gyazo

Input the following:

ParameterValue
cnt2
pageID1
depth2
module_id4 (content ID or topic ID of the target post)

When you are done, click [Execute].

Verify the response body.

Image from Gyazo

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:

      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 (no parameter inputs):

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

cnt=2, pageID=1:

cnt=2 and pageID=1:
       1            9 
     /  \          / \ 
    2    3        10 11 
  / | \  | \
 4  5  6 7  8

cnt=2, pageID=2:

cnt=2 and pageID=2:
       12     13
             /
            14

cnt=2, pageID=1, depth=2:

cnt=2, pageID=1, and depth=2:
      1            9 
     / \          / \ 
    2   3        10 11 

cnt=2, pageID=1, root=2:

cnt=2, pageID=1, and root=2:
    2   
  / | \  
 4  5  6 

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

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:

cnt=2, pageID=1, children_cnt=1, children_pageID=2:
     1       9 
      \       \ 
       3      11 
        \
         8

If you have any other questions, please use our contact form or Slack workspace.