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

Posted 2023-03-08

【中文标题】具有多个别名和 Apollo (Vue.js) 的 GraphQL 查询

【英文标题】：GraphQL queries with multiple aliases and Apollo (Vue.js)

【发布时间】：2020-10-18 16:17:07

【问题描述】：

我正在尝试使用 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 中进行查询？

【参考方案1】：

我认为最好的方法是使用update 属性：https://apollo.vuejs.org/guide/apollo/queries.html#name-matching

apollo: 
    campaigns: 
      query: gql`
        query 
          campaigns: campaigns(
            where:  archive: "false" 
            sort: "order:desc"
          ) 
            name
            url
          
        
      `
    ,
    archive: 
      update: data => data.campaigns,
      query: gql`
        query 
          campaigns(where:  archive: "true" , sort: "order:desc") 
            name
            url
          
        
      `
    
  

【参考方案2】：

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

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

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

【参考方案3】：

您使用campaigns 作为整个查询的键，因此您需要像这样初始化数据：

data() 
  return 
    campaigns: 
      campaigns: [],
      archive: [],
    ,
  ;
,

然后您可以通过密钥访问每个列表（即campaigns.campaigns 和campaigns.archive）。

【讨论】：

谢谢！你确定吗？当我像这样初始化数据时，我仍然无法访问campaigns.campaigns 或campaigns.archive。我仍然可以像以前一样访问campaigns，而archive 是空的。此外，当我使用 devtools 检查 Vue 树时，我看到的只是……“$apolloData >campaigns: Array[4] > 4 Objects contains 2017-2020” 与下面的数据相同。

射击。抱歉，距离我上次使用 Vue 已经有一段时间了。我 think 对于多个查询，您可能必须使用 result 选项自己手动设置数据，在这种情况下，您仍然可以像原来一样将其初始化为 campaigns: [], archive: []。

嗯，语法真的让我很困惑。我注意到某些术语必须匹配才能使查询正常工作，但我不确定为什么。我似乎无法理解嵌套以及与查询结构中的内容相对应的内容。我还想知道语法是否在某个时候发生了变化，因为我一直在阅读引用的文档已经过时，并且我尝试了教程中的内容，但它不起作用。当我使用结果或更新时，数据属性显然是未定义的。