如何通过Directus API从含parent ID的自引用层级表获取树形结构

前置配置补全 #

你已经完成了parent_id字段的多对一关系配置，还需要补充反向的一对多关系：

• 在当前分类集合中新增一个子分类类型的字段，字段类型选「一对多」
• 关联集合选择当前分类集合本身，外键字段选择你已经配置好的parent_id字段
• 保存关系配置即可，无需修改原有数据

方法1：通过REST API直接获取树形结构 #

请求分类集合接口时，按如下方式配置参数即可直接返回嵌套树形结构：

1. 新增filter参数，过滤出根分类：filter[parent_id][_null]=true
2. 新增fields参数，指定要拉取的层级：
   • 固定层级写法（以3级为例）：fields=*,子分类字段名.*,子分类字段名.子分类字段名.*
   • 无限层级递归写法：fields=*,子分类字段名.*.*，该语法会自动拉取所有层级的子分类，直到没有子项为止

注意：递归查询的最大深度默认受Directus系统配置的RELATIVE_MAX_DEPTH参数限制，默认最大值为10，若你的分类层级超过10，可在环境变量中修改该参数调整上限。

请求示例（假设集合名为category，子分类字段名为children）：

GET /items/category?filter[parent_id][_null]=true&fields=*,children.*.*

方法2：通过GraphQL查询获取 #

GraphQL天然支持嵌套查询，直接按层级写查询语句即可，示例如下：

query getCategoryTree {
  category(filter: { parent_id: { _null: true } }) {
    id
    name
    sort
    children {
      id
      name
      sort
      children {
        id
        name
        sort
      }
    }
  }
}

如果需要无限层级，可以使用Directus GraphQL的递归片段语法实现。

可选：前端二次格式化 #

如果接口返回的结构仍不符合你的业务要求，可以用简单的递归函数自行整理树形结构，JavaScript示例如下：

// 入参为接口返回的全部分类平级数据
function buildTree(categoryList, parentId = null) {
  return categoryList
    .filter(item => item.parent_id === parentId)
    .map(item => ({
      ...item,
      children: buildTree(categoryList, item.id)
    }))
}

const categoryTree = buildTree(await fetchAllCategory())

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