vue.js - 具有多个别名和 Apollo (Vue.js) 的 GraphQL 查询

Question

我正在尝试使用 Apollo 将数据从我的 Strapi 后端的单一集合类型提取到 Vue.js 项目中。它适用于单个别名，但我无法让它适用于多个别名。

我从“事件”的集合类型中获取我的数据，它有一个 bool 字段“存档”。我想创建一个“事件”数组，其中包含所有尚未存档的事件(archive = false)，以及一个“存档”数组，其中包含所有已存档的事件(archive = true)。

这是我的代码:

import gql from "graphql-tag";

export default {
  name: "Campaigns",
  data() {
    return {
      campaigns: [],
      archive: []
    };
  },
  apollo: {
    campaigns: gql`
      query getCampaigns {
        campaigns: campaigns(where: { archive: "false" }, sort: "order:DESC") {
          name
          url
        }
        archive: campaigns(where: { archive: "true" }, sort: "order:DESC") {
          name
          url
        }
      }
    `
  }

查询返回一个“campaigns”数组，但是“archive”数组还是空的。

我试过改变一些东西(首先放置存档别名，切换 bool 值以确保我通常可以访问存档事件的数据等)。问题显然出在“存档”别名上。

当我对 Strapi 的 GraphQL playground 使用相同的查询时，我得到了想要的结果:

{
  campaigns: campaigns(where: { archive: "false" }, sort: "order:DESC") {
    name
  }
  archive: campaigns(where: { archive: "true" }, sort: "order:DESC") {
    name
  }
}

...返回...

{
  "data": {
    "campaigns": [
      {
        "name": "2020"
      },
      {
        "name": "2019"
      },
      {
        "name": "2018"
      },
      {
        "name": "2017"
      }
    ],
    "archive": [
      {
        "name": "2016"
      },
      {
        "name": "2015"
      }
    ]
  }
}

如何使用 Apollo 在 Vue.js 中进行查询？

Answer 1

我想我已经找到了解决方案。从技术上讲，我想这些是单独的查询(如果我是正确的话，这会破坏别名的目的)但它会做我想要的:

  apollo: {
    campaigns: {
      query: gql`
        query {
          campaigns: campaigns(
            where: { archive: "false" }
            sort: "order:desc"
          ) {
            name
            url
          }
        }
      `
    },
    archive: {
      query: gql`
        query {
          archive: campaigns(where: { archive: "true" }, sort: "order:desc") {
            name
            url
          }
        }
      `
    }
  }

显然在某些情况下，初始化“apollo: { XYZ:”和别名“query {XYZ:”必须匹配。我在文档中看到它们不一定必须匹配，但我不完全理解何时以及为什么。

我想我真的不知道初始参数的作用。