vue.js - vue-apollo：GraphQL 查询仅在使用时运行标签。永远不会在脚本代码中工作。this.$apollo.queries 为空

Question

我知道我可能在这里遗漏了一些非常基本的东西，我正在尝试使用 vue-apollo 运行 graphql 查询......如果我使用标签，它工作正常

如果我尝试从我的代码中运行查询，就像文档中的基本示例（下面的链接）一样，那么什么也不会发生。服务器从不接收任何请求，并且 this.$apollo.queries 为空。）

文档中的基本示例：

• https://akryum.github.io/vue-apollo/guide/apollo/#queries
• https://vue-apollo.netlify.com/guide/apollo/queries.html#simple-query

我已经在“apollo”属性/对象中定义了查询......当页面加载时我如何实际执行它？请注意，我使用的是打字稿，这就是它使用“ get apollo()”方法的原因。

这是我的代码...

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'

  export default class List extends Vue {

    myQueryName='my default value';

    get apollo() {
      return {
        myQueryName: {
          query: require('../graphql/listMeta.graphql'),
          // prefetch: true <-- tried with and without this
        }
      }
    }

  }
</script>

<template>
  <div>

    <!-- THIS DOESN"T WORK ... -->
    queries are: {{this.$apollo.queries}} <!-- THIS JUST SHOWS AN EMPTY OBJECT: {} -->
    <hr>
    myQueryName value is: {{myQueryName}} <!-- THIS JUST SHOWS "my default value"  -->

    <hr>
    <!--
    THIS DOES WORK...
    <ApolloQuery :query="this.apollo.myQueryName.query" >
      <template slot-scope="{ result: { loading, error, data } }"></template>
    </ApolloQuery>
    -->
  </div>
</template>

请注意，模板中的 this.$apollo.queries 是空的，可能是一个线索……但仍然不知道为什么它是空的。从我看到的文档和示例中，它应该从我的get apollo数据方法中填充。

据我所知，看起来与https://github.com/OniVe/vue-apollo-typescript-example/blob/master/pages/index.vue基本相同，我不知道有什么区别。

我已经尝试从头开始多次重建项目（有和没有 nuxt），在几个月的过程中以及 vue/nuxt/apollo/vue-apollo 的许多不同版本......查询永远不会运行（从内存中）除非我使用标签。

我错过了什么？

Answer 1

您缺少@Component装饰器，需要设置 Vue 组件的初始属性，因此vue-apollo可以在组件创建时检测到它并创建一个 smartquery 属性。

import { Component, Vue } from 'vue-property-decorator'
import listMetaDocument from '../graphql/listMeta.gql'

@Component({
  name: 'List',
  apollo: {
    listMeta: {
      query: listMetaDocument
    },
  },
})
export default class List extends Vue { }