时间戳

首页 > 解决方案 > 具有多个别名和 Apollo (Vue.js) 的 GraphQL 查询

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

问题描述

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

我从具有“归档”布尔字段的“活动”集合类型中获取数据。我想创建一个“活动”数组，其中包含所有尚未归档的活动（归档 = false），以及一个包含所有归档活动的“归档”数组（归档 = 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”数组仍然为空。

我已经尝试过切换（首先放置存档别名，切换布尔值以确保我通常可以访问存档活动的数据等）。问题显然在于“存档”别名。

当我对 Strapi 的 GraphQL 游乐场使用相同的查询时，我得到了想要的结果：

{
  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 中进行查询？

标签： vue.jsgraphqlaliasapollo

解决方案

我想我找到了解决办法。从技术上讲，我猜这些是单独的查询（如果我是正确的，这会破坏别名的目的），但它可以满足我的要求：

  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 :”必须匹配。我在文档中看到它们不一定要匹配，但我不完全理解何时以及为什么。

我想我无法真正说出初始参数的作用。

推荐阅读