I am working on a project called WikiJS. My task is to make a tree view looking left-hand-sidebar (LHS).
The LHS is using dynamic data, which is pulled by using GraphQL, Vue Apollo queries.
There are two queries:
- is displaying the first level of files (some of them can be shown with folder icons and will contain other files.)
- query that pulls the data from a folder that is pulled by the 1st query. Basically, once clicked on a folder the 2nd query will return its content.
That's a picture of it:
The first query looks like that and it returns the main data in the LHS(including the folders):
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
}
})
And the second that returns the folders' content
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
}
})
Is there a way to combine them, so eventually I get a single query that returns the entire LHS including the folders and their contents? I need that in order to convert it to a single JSON object.
Folder: {
SubFolder: {
SubSubFolder: {}
}
}
Folder2: {}
Folder3: {
SubFolder1:{}
}
Basically, I want to add the children to the folders, dynamically. At the moment I have only the first level, where it looks like that:
Folder1:{}
Folder2:{}
Folder3:{}
Also, I think that would be important as I looked into it for a hint, file page.qraphql of the project:
tree(
path: String
parent: Int!
mode: PageTreeMode!
locale: String!
includeAncestors: Boolean)
and that
type PageTreeItem {
id: Int!
item: Int!
path: String!
depth: Int!
title: String!
isPrivate: Boolean!
isFolder: Boolean!
privateNS: String
parent: Int!
pageId: Int
locale: String!
}
I believe that's all I have to adjust in order to be able to combine the two queries.
I discovered, that the 2nd query requires input as an Integer for the parent field. I tested and if I add to the parent variable the value of 1 (just an example) the query actually returns the contents of the folder with the parent id of 1.