使用 Apollo 和 Vuejs 的反应式查询定义

Posted 2023-03-08

【中文标题】使用 Apollo 和 Vuejs 的反应式查询定义

【英文标题】：Reactive query definition with Apollo and Vuejs

【发布时间】：2021-01-27 05:23:44

【问题描述】：

我尝试以编程方式调用查询，例如：

apollo: 
listItems: 
  query()  
      if (this.listType == "bills") 
      return gql`
        
          bills 
            billId
            order 
              orderId
              customer 
                customerId
                billingAddress 
                  title
                
              
            
            createdAt
          
        
      `;
    
  ,
property
  update: data => data.bills || data.bills

但是当我尝试这个时，我得到了这个错误：

vue.runtime.esm.js?2b0e:1888 Invariant Violation：期望解析的 GraphQL 文档。也许您需要将查询字符串包装在“gql”标签中？

我已按照文档中的说明进行操作：

https://apollo.vuejs.org/guide/apollo/queries.html#reactive-query-definition

最好的问候和感谢四位帮助！

保持健康

【问题讨论】：

你在这个组件中导入 gql-tag 吗？

jep，不用 if 语句也可以工作

【参考方案1】：

您不能将 apollo 查询包装在 if 语句中。您可以改用skip。在您的示例中，它将是这样的：

listItems: 
 query()  
  return gql`
    
      bills 
        billId
        order 
          orderId
          customer 
            customerId
            billingAddress 
              title
            
          
        
        createdAt
      
    `
 ,
 skip() 
  return this.listType != "bills"

【讨论】：

谢谢，这就是帮助！保持健康！