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

Posted 2023-02-22

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

【英文标题】：vue-apollo: GraphQL queries only run when using <ApolloQuery> tags. Never works in script code. this.$apollo.queries is empty

【发布时间】：2019-06-30 03:56:25

【问题描述】：

我知道我可能在这里遗漏了一些非常基本的东西，我正在尝试使用 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 的许多不同版本......查询从未运行（来自内存) 除非我使用标签。

我错过了什么？

【参考方案1】：

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

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