Блог

Я работаю над проектом под названием WikiJS. Моя задача — сделать древовидное представление, отображаемое на левой боковой панели (LHS).

LHS использует динамические данные, которые извлекаются с помощью запросов GraphQL, Vue Apollo.

Есть два запроса:

1. отображает файлы первого уровня (некоторые из них могут отображаться с помощью значков папок и будут содержать другие файлы.)
2. запрос, который извлекает данные из папки, которая извлекается с помощью 1-го запроса. По сути, после нажатия на папку 2-й запрос вернет ее содержимое.

Вот такая картина:

Первый запрос выглядит так, и он возвращает основные данные в LHS (включая папки):

 const resp = await this.$apollo.query({
    query: gql`
      query ($path: String, $locale: String!) {
        pages {
          tree(path: $path, mode: ALL, locale: $locale, includeAncestors: true) {
            id
            path
            title
            isFolder
            pageId
            parent
            locale
          }
        }
      }
    `,
    fetchPolicy: 'cache-first',
    variables: {
      path: this.path,
      locale: this.locale
    }
  })
  

И второй, который возвращает содержимое папок

 const resp = await this.$apollo.query({
    query: gql`
      query ($parent: Int, $locale: String!) {
        pages {
          tree(parent: $parent, mode: ALL, locale: $locale) {
            id
            path
            title
            isFolder
            pageId
            parent
            locale
          }
        }
      }
    `,
    fetchPolicy: 'cache-first',
    variables: {
      parent: item.id,
      locale: this.locale
    }
  })
  

Есть ли способ их объединить, чтобы в итоге я получил один запрос, который возвращает всю LHS, включая папки и их содержимое? Мне это нужно, чтобы преобразовать его в один объект JSON.

 Folder: {
SubFolder: {
   SubSubFolder: {}
 }
}
Folder2: {}
Folder3: {
     SubFolder1:{}
}
  

По сути, я хочу динамически добавлять дочерние элементы в папки. На данный момент у меня есть только первый уровень, где это выглядит так:

 Folder1:{}
Folder2:{}
Folder3:{}
  

Кроме того, я думаю, что это было бы важно, поскольку я искал в нем подсказку, файловую страницу.qraphql проекта:

 tree(
path: String
parent: Int!
mode: PageTreeMode!
locale: String!
includeAncestors: Boolean)
  

и это

  type PageTreeItem {
 id: Int!
 item: Int!
 path: String!
 depth: Int!
 title: String!
 isPrivate: Boolean!
 isFolder: Boolean!
 privateNS: String
 parent: Int!
 pageId: Int
 locale: String!
 }
  

Я считаю, что это все, что мне нужно настроить, чтобы иметь возможность комбинировать два запроса.

Я обнаружил, что 2-й запрос требует ввода в виде целого числа для родительского поля. Я протестировал, и если я добавлю к родительской переменной значение 1 (просто пример), запрос фактически возвращает содержимое папки с родительским идентификатором 1.