Example of a tree-structure explorer in sanity.io

deskStructure.js

import { MdAdd, MdEdit, MdPeople, MdPersonAdd, MdPublic } from "react-icons/md"

import S from "@sanity/desk-tool/structure-builder"
import client from "part:@sanity/base/client"

export default () =>
// const disabledDefaultList = () =>
  S.list()
    .title("Content")
    .items([
      S.listItem()
        .title("Organization")
        .icon(MdPublic)
        .child(topGroups()),
      ...S.documentTypeListItems()
    ])

const topGroups = () =>
  S.documentList()
    // export default () => S.documentList()
    .title("Top")
    .menuItems(S.documentTypeList("group").getMenuItems())
    .filter("_type == $type && !defined(parent)")
    .params({ type: "group" })
    .child(groupId => subTeamsAndPersons(groupId))

const persons = groupId => {
  return S.documentList()
    .title("People")
    .menuItems(S.documentTypeList("person").getMenuItems())
    .filter("_type == $type && references($groupId)")
    .params({ type: "person", groupId })
}

const subTeamsAndPersons = async groupId => {
  let { title, groups } = await getGroupTitleAndSubGroups(groupId)
  if (!title) title = "Group"

  return S.list()
    .title(title)
    .items([
      ...groups.map(groupId =>
        S.documentListItem()
          .id(groupId)
          .schemaType("group")
          .child(groupId => subTeamsAndPersons(groupId))
      ),

      // S.divider(),

      S.listItem()
        .title("People")
        .icon(MdPeople)
        .child(() => persons(groupId)),

      S.listItem()
        .title("Edit this group")
        .icon(MdEdit)
        .child(
          S.editor()
            .id(groupId)
            .schemaType("group")
            .documentId(groupId)
        ),

      addNewListItemOfType("person", "group", groupId, MdPersonAdd),
      addNewListItemOfType("group", "parent", groupId, MdAdd)
    ])
}

// helpers

const addNewListItemOfType = (type, referTo, groupId, icon) =>
  S.listItem()
    .id("new_" + type)
    .title("Add new " + type)
    .icon(icon)
    .child(async () => {
      let newItemData = { _id: "drafts.", _type: type }
      newItemData[referTo] = { _ref: groupId }
      const { _id } = await client.create(newItemData)

      return S.editor()
        .id(_id)
        .documentId(_id)
        .schemaType(type)
    })

const titleAndGroupQuery = `{
        "title": *[_type == $type && $groupId == _id && !(_id in path('drafts.**'))][0].name,
        "groups": *[_type == $type && $groupId == parent._ref && !(_id in path('drafts.**'))]._id
    }`

const getGroupTitleAndSubGroups = async groupId => client.fetch(titleAndGroupQuery, { type: "group", groupId })