如何使用Supabase实现递归查询生成评论树结构？

假设你的评论表名为comments，结构如下：

方案1：数据库端生成树形结构（推荐数据量大时使用） #

利用PostgreSQL的递归CTE（公共表表达式）结合JSON函数，直接在数据库中生成树形结构。你可以先创建一个自定义SQL函数，再通过Supabase调用。

1. 创建递归函数 #

在Supabase控制台的SQL编辑器中执行以下代码：

CREATE OR REPLACE FUNCTION get_comment_tree()
RETURNS JSON AS $$
WITH RECURSIVE comment_tree AS (
  -- 先获取所有顶级评论，初始化children为空数组
  SELECT
    id,
    value,
    parent_id,
    '[]'::JSON AS children
  FROM comments
  WHERE parent_id IS NULL

  UNION ALL

  -- 递归查询子评论，将子节点聚合为children数组
  SELECT
    c.id,
    c.value,
    c.parent_id,
    JSON_AGG(ct) AS children
  FROM comments c
  JOIN comment_tree ct ON c.parent_id = ct.id
  GROUP BY c.id, c.value, c.parent_id
)
-- 最终将所有顶级评论聚合为JSON数组
SELECT JSON_AGG(comment_tree) FROM comment_tree;
$$ LANGUAGE sql;

2. 在Supabase客户端调用函数 #

const { data: commentTree, error } = await supabase.rpc('get_comment_tree');

调用后直接得到你需要的树形结构数据。

方案2：前端从扁平化数据构建树形结构 #

如果不想修改数据库，也可以先查询所有评论的扁平化数据，再在前端处理成树形结构。

1. 查询所有评论 #

const { data: comments, error } = await supabase
  .from('comments')
  .select('id, value, parent_id');

2. 前端构建树形结构 #

function buildCommentTree(comments) {
  const commentMap = new Map();
  const tree = [];

  // 将所有评论存入Map，方便快速查找
  comments.forEach(comment => {
    commentMap.set(comment.id, { ...comment, children: [] });
  });

  // 遍历评论，将子评论挂载到对应父评论的children中
  comments.forEach(comment => {
    if (comment.parent_id !== null) {
      const parentComment = commentMap.get(comment.parent_id);
      if (parentComment) {
        parentComment.children.push(commentMap.get(comment.id));
      }
    } else {
      // 顶级评论直接加入树的根节点
      tree.push(commentMap.get(comment.id));
    }
  });

  return tree;
}

// 生成树形结构
const commentTree = buildCommentTree(comments);

方案对比 #

• 方案1：数据库端处理，返回数据直接可用，减少前端计算量，适合评论数量较多的场景。
• 方案2：前端处理，无需修改数据库，逻辑灵活，适合评论数量较少的场景。

内容的提问来源于stack exchange，提问作者Ainur Yarulin