Usage in Vue components

After installing vue-apollo in your app, all your components can now use Apollo through the apollo special option.

apollo options

To declare apollo queries in your Vue component, add the apollo object in the component options:

new Vue({
  apollo: {
    // Apollo specific options
  },
})

In a .vue file:

<template>
  <div>My component</div>
</template>

<script>
export default {
  apollo: {
    // Vue-Apollo options here
  }
}
</script>

$apollo

All the components under the one which has the apolloProvider option have an $apollo helper available. This is the glue between your component and Apollo and it does all the heavy lifting for you (including automatic updates and teardowns).

You can access the apollo-client (opens new window) instances with this.$apollo.provider.defaultClient or this.$apollo.provider.clients.<key> (for Multiple clients) in all your vue components.

If you are curious, see $apollo API.

Queries

In the apollo object, add an attribute for each property you want to feed with the result of an Apollo query.

<template>
  <div>{{ hello }}</div>
</template>

<script>
import gql from 'graphql-tag'

export default {
  apollo: {
    // Simple query that will update the 'hello' vue property
    hello: gql`query {
      hello
    }`,
  },
}
</script>

Learn more in the Queries section.

Mutations

Use this.$apollo.mutate to send mutations:

methods: {
  async addTag() {
    // Call to the graphql mutation
    const result = await this.$apollo.mutate({
      // Query
      mutation: gql`mutation ($label: String!) {
        addTag(label: $label) {
          id
          label
        }
      }`,
      // Parameters
      variables: {
        label: this.newTag,
      },
    })
  }
}

Learn more in the Mutations section.

Special options

The special options begin with $ in the apollo object.

Learn more in the Special options section.