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

Question

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

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 不变违规：需要已解析的 GraphQL 文档。也许您需要将查询字符串包装在“gql”标签中？

我已经按照文档中的描述进行操作：

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

致以最诚挚的问候并感谢四位帮助！

保持健康

Answer 1

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

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

}

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

Reactive query definition with Apollo and Vuejs

apollo

vue.js

graphql