如何使用GraphQL Vue-Apollo将两个查询组合在一起？

问题描述

我正在从事一个名为WikiJS的项目。我的任务是使树状视图看起来像左侧边栏（LHS）。

LHS正在使用动态数据，该动态数据是通过使用GraphQL，Vue Apollo查询提取的。

有两个查询：

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,locale: $locale) {
            id
            path
            title
            isFolder
            pageId
            parent
            locale
          }
        }
      }
    `,variables: {
      parent: item.id,locale: this.locale
    }
  })

是否有一种将它们组合的方法，所以最终我得到一个查询，该查询返回包括文件夹及其内容在内的整个LHS？我需要将其转换为单个JSON对象。

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

基本上，我想动态地将子级添加到文件夹中。目前，我只有第一个级别，看起来像这样：

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

此外，我认为这很重要，因为我调查了该项目的提示文件file.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!
 }

我相信，为了将两个查询结合起来，我要做的就是调整。

我发现，第二个查询要求输入父字段的整数。我测试了一下，如果我将1的值添加到父变量（仅作为示例），查询实际上返回父ID为1的文件夹的内容。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）