How to combine two queries in one using GraphQL, Vue-Apollo?

1k views Asked by At

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:

  1. is displaying the first level of files (some of them can be shown with folder icons and will contain other files.)
  2. 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:

enter image description here

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.

0

There are 0 answers