1

I'm using vue-apollo + vue-property-decorator. I'm able to run queries just fine like this: 

  get apollo () {
    return {
      rc_tags: {
        query: gql`{ <body of query> }`
      }
    }
  }

But if I try to use a property of the component for the query, e.g. from a file

  MYQUERY = gql`{ <body of query> }`


  get apollo () {
    return {
      rc_tags: {
        query: MYQUERY
      }
    }
  }

Then I get the error:

Invariant Violation: Expecting a parsed GraphQL document. 
Perhaps you need to wrap the query string in a "gql" tag?

It doesn't matter if I import MYQUERY from another file as in the example above, or if it's a property of the local component, same error. I can mouse-over MYQUERY and get a TypeScript hint that it's a DocumentNode, but no matter what I do, I can't get it to work without putting the full template literal inside the actual get apollo () function.

Ascendant
  • 944
  • 1
  • 10
  • 28
  • 1
    If you add console.log(MYQUERY) inside the getter, what is the output in the console? – Daniel Rearden Mar 07 '20 at 13:44
  • It looked fine in the console once the page had already loaded - however, I was referencing a property of the component which I realized wasn't available when `get apollo ()` runs which was causing the problem – Ascendant Mar 08 '20 at 02:12

1 Answers1

1

I was baffled as to why the same gql query as a property of the component would be any different than defining it inline, until I realized that the get apollo() runs before the component is created(), let alone mounted().

This means that all data properties on the component are undefined at that point, and if MYQUERY relies on those properties, it too will be undefined, which is why gql complained.

The reason I was trying to reference the component's properties was to evaluate "which" query to run. If you want to do something like that, you need to take care that you're only evaluating on data that's available before the component it's inside is created.

Ascendant
  • 944
  • 1
  • 10
  • 28