admin管理员组

文章数量:1026989

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?

Share Improve this question asked Mar 17, 2017 at 9:16 RaedRaed 6981 gold badge7 silver badges24 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

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

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?

Share Improve this question asked Mar 17, 2017 at 9:16 RaedRaed 6981 gold badge7 silver badges24 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

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

本文标签: javascriptHow to trigger an Apollo query in a Vue component eventStack Overflow