vue.js - 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)

Question

I know I'm probably missing something really super basic here, I'm trying to run a graphql query with vue-apollo... if I use tags, it works fine

(我知道我可能在这里错过了一些非常基础的东西，我正在尝试使用vue-apollo运行graphql查询...如果我使用标签，那么效果很好)

If I try to run queries from inside my code, like in the basic examples in the docs (links below) then nothing happens.

(如果我尝试从代码内部运行查询，例如docs中的基本示例（下面的链接），则什么都不会发生。)

The server never receives any request, and this.$apollo.queries is empty.)

(服务器从不接收任何请求，并且此。$ apollo.queries为空。）)

Basic examples from the docs:

(来自文档的基本示例：)

• https://akryum.github.io/vue-apollo/guide/apollo/#queries

  (https://akryum.github.io/vue-apollo/guide/apollo/#queries)

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

  (https://vue-apollo.netlify.com/guide/apollo/queries.html#simple-query)

I've defined the query in the "apollo" property/object... how do I actually execute it when the page loads?

(我已经在“ apollo”属性/对象中定义了查询...页面加载后如何实际执行查询？)

Note that I'm using typescript, which is why it's using a " get apollo() " method.

(请注意，我使用的是打字稿，这就是为什么它使用“ get apollo() ”方法的原因。)

Here's my code...

(这是我的代码...)

<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>

Note that this.$apollo.queries is empty in the template, probably a clue... but still no idea why its empty.

(请注意，模板中的this。$ apollo.queries是空的，可能是一个线索……但是仍然不知道为什么它为空。)

From the docs and examples I've seen it should be populated from my get apollo data method.

(从文档和示例中，我已经看到应该从我的get apollo数据方法中填充它。)

Looks basically the same as https://github.com/OniVe/vue-apollo-typescript-example/blob/master/pages/index.vue as far as I can tell, I don't know what the difference is.

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

I've tried rebuilding the project from scratch multiple times (with and without nuxt), over teh course of months and many different versions of vue/nuxt/apollo/vue-apollo... the queries never run (from memory) unless I use tags.

(我已经尝试了几个月（使用和不使用nuxt）从头开始多次重建项目，历时数月，并且使用了许多不同版本的vue / nuxt / apollo / vue-apollo ...查询永远不会（从内存中）运行，除非我使用标签。)

What am I missing?

(我想念什么？)

  ask by LaVache translate from so

Answer 1

You are missing @Component decorator, it is needed to set initial properties of Vue component, so vue-apollo can detect it when component created and make a smartquery property.

(您缺少@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 { }