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

If I try to run queries from inside my code, like in the basic examples in the docs (links below) then nothing happens. The server never receives any request, and this.$apollo.queries is empty.)

Basic examples from the docs:

I've defined the query in the "apollo" property/object... how do I actually execute it when the page loads? Note that I'm using typescript, which is why it's using a "get apollo()" method.

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. From the docs and examples I've seen it should be populated from my get apollo data method.

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.

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.

What am I missing?

Yevhenii Ponomar · Accepted Answer · 2019-12-01 12:18:07Z

0

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.

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

answered Dec 1, 2019 at 12:18

Yevhenii Ponomar

19910 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue-apollo: GraphQL queries only run when using <ApolloQuery> tags. Never works in script code. this.$apollo.queries is empty

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related