ApolloClient：不能将 GraphQL 查询作为 JS 变量传递？ “不变违规：期望解析的 GraphQL 文档。”答案

【问题标题】：ApolloClient: Can't pass GraphQL query as a JS variable? "Invariant Violation: Expecting a parsed GraphQL document."ApolloClient：不能将 GraphQL 查询作为 JS 变量传递？ “不变违规：期望解析的 GraphQL 文档。”
【发布时间】：2020-06-19 20:37:45
【问题描述】：

我正在使用 vue-apollo + vue-property-decorator。我可以像这样很好地运行查询：

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

但是如果我尝试使用组件的属性进行查询，例如从文件中

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


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

然后我得到错误：

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

如果我像上面的示例那样从另一个文件导入 MYQUERY，或者它是本地组件的属性，则同样的错误并不重要。我可以将鼠标悬停在 MYQUERY 上并得到一个 TypeScript 提示，它是一个 DocumentNode，但无论我做什么，如果不将完整的模板文字放入实际的 get apollo () 函数中，我就无法让它工作。

【问题讨论】：

如果在getter里面加上console.log(MYQUERY)，那么console里面的输出是什么？
页面已经加载后，它在控制台中看起来很好 - 但是，我引用了组件的一个属性，当 get apollo () 运行导致问题时，我意识到该属性不可用跨度>

标签： graphql apollo apollo-client vue-apollo graphql-tag

【解决方案1】：

我很困惑为什么将相同的 gql 查询作为组件的属性与内联定义它有什么不同，直到我意识到 get apollo() 在组件创建之前运行，更不用说 mount() .

这意味着此时组件上的所有数据属性都是未定义的，如果 MYQUERY 依赖于这些属性，它也将是未定义的，这就是 gql 抱怨的原因。

我试图引用组件属性的原因是评估要运行的“哪个”查询。如果你想做这样的事情，你需要注意你只评估在它内部的组件被创建之前可用的数据。

【讨论】：