# Utilisation dans des composants Vue

AprÚs avoir installé vue-apollo dans votre application, tous vos composants peuvent utiliser Apollo via l'option spéciale apollo.

# Options apollo

Pour dĂ©clarer des requĂȘtes Apollo dans vos composants Vue, ajouter l'objet apollo dans les options du composant :

new Vue({
  apollo: {
    // Options spécifiques Apollo
  },
})

Dans un fichier .vue :

<template>
  <div>Mon composant</div>
</template>

<script>
export default {
  apollo: {
    // Options Vue Apollo
  }
}
</script>

# $apollo

Tous les composants enfant d'un composant possédant l'option apolloProvider ont un utilitaire $apollo de disponible. C'est le lien entre le composant et Apollo, il gÚre toute la complexité à votre place (y compris les mises à jours et le nettoyage).

Vous pouvez accéder aux instances apollo-client (opens new window) avec this.$apollo.provider.defaultClient ou bien this.$apollo.provider.clients.<key> (pour les clients multiple) dans tous vos composants Vue.

Si vous ĂȘtes curieux, consultez l'API d'$apollo.

# RequĂȘtes

Dans l'objet apollo, ajoutez un attribut pour chaque propriĂ©tĂ© Ă  laquelle vous voulez fournir le rĂ©sultat d'une requĂȘte Apollo.

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

<script>
import gql from 'graphql-tag'

export default {
  apollo: {
    // Une requĂȘte simple qui rafraĂźchit la propriĂ©tĂ© Vue 'hello'
    hello: gql`query {
      hello
    }`,
  },
}
</script>

Pour en savoir plus, consultez la section RequĂȘtes.

# Mutations

Utilisez this.$apollo.mutate pour envoyer des mutations :

methods: {
  async addTag() {
    // Appel Ă  la mutation GraphQL
    const result = await this.$apollo.mutate({
      // RequĂȘte
      mutation: gql`mutation ($label: String!) {
        addTag(label: $label) {
          id
          label
        }
      }`,
      // ParamĂštres
      variables: {
        label: this.newTag,
      },
    })
  }
}

Pour en savoir plus, consultez la section Mutations.

# Options spéciales

Les options spéciales commencent par un $ dans l'objet apollo.

Pour en savoir plus, consultez la section Options spéciales.

DerniĂšre mise Ă  jour: 11/02/2021 Ă  11:08:30