How to trigger an Apollo GraphQL query on a mounted event in a Vue.js ponent.

Here is what my code looks like:

<template>
</template>

<script>
import gql from 'graphql-tag';

const myQuery = gql`
  query someQuery {
    books{
      id
   }
}`

export default {
  data: () => ({
    books: []
  }),
  apollo: {
    books: {
      query: myQuery,
    },
  },
  mounted () {
  // run the appollo query here as well ?
  }
};
</script>

The query runs fine on the first load of the ponent, but how can I get it to run with various events?

How to trigger an Apollo GraphQL query on a mounted event in a Vue.js ponent.

Here is what my code looks like:

<template>
</template>

<script>
import gql from 'graphql-tag';

const myQuery = gql`
  query someQuery {
    books{
      id
   }
}`

export default {
  data: () => ({
    books: []
  }),
  apollo: {
    books: {
      query: myQuery,
    },
  },
  mounted () {
  // run the appollo query here as well ?
  }
};
</script>

The query runs fine on the first load of the ponent, but how can I get it to run with various events?

• javascript
• vue.js
• vuejs2
• graphql
• apollo-client

Share Improve this question Follow asked Mar 17, 2017 at 9:16 RaedRaed 69811 gold badge77 silver badges2424 bronze badges 1

• Make the query a method and call it when the events occur. – Bert Commented Mar 17, 2017 at 14:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

this.$apollo.queries.books.refetch();

if you have variables and need to update them on each call, pass them as parameter of the method refetch:

this.$apollo.queries.books.refetch(variables);