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

【问题标题】：Reactive query definition with Apollo and Vuejs使用 Apollo 和 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 语句也可以工作

标签： vue.js graphql apollo

【解决方案1】：

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

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

}

【讨论】：

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