Reactive query definition with Apollo and Vuejs

Question

i try to call a query programaticly eg:

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
}

}

but when i try this, i get this error:

vue.runtime.esm.js?2b0e:1888 Invariant Violation: Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a "gql" tag?

I have follow the description in the docs:

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

Best regards and thanks four help!

Stay healthy

Answer 1

You cannot wrap apollo query in an if statement. You can use skip instead. In your example it would be like this:

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

}