# RequĂȘtes

Dans GraphQL, une requĂȘte est un appel Ă  une API pour rĂ©cupĂ©rer de la donnĂ©e. C'est reprĂ©sentĂ© par un document GraphQL comme ceci :

query myHelloQueryName {
  hello
}

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

# RequĂȘte simple

Vous pouvez utiliser gql pour Ă©crire vos requĂȘtes GraphQL :

import gql from 'graphql-tag'

Ajoutez la requĂȘte gql (opens new window) directement en valeur :

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

Vous pouvez accĂ©der Ă  la requĂȘtes avec this.$apollo.queries.<name>.

Vous pouvez initialiser la propriété dans le hook data de votre composant Vue :

data () {
  return {
    // Intialiser votre donnée Apollo
    hello: '',
  },
},

CÎté serveur, ajoutez le schéma et le résolveur correspondants :

export const schema = `
type Query {
  hello: String
}

schema {
  query: Query
}
`

export const resolvers = {
  Query: {
    hello (root, args, context) {
      return 'Hello world!'
    },
  },
}

Pour plusz d'informations, consultez la documentation d'Apollo (opens new window).

Vous pouvez utiliser votre propriété comme d'habitude dans votre composant Vue :

<template>
  <div class="apollo">
    <h3>Hello</h3>
    <p>
      {{hello}}
    </p>
  </div>
</template>

# Correspondance de noms

Notez qu'une erreur de dĂ©butant claqque est d'utiliser un nom de donnĂ©e diffĂ©rent du champ dans la requĂȘte, par exemple :

apollo: {
  world: gql`query {
    hello
  }`
}

Vous remarquez que world est diffĂ©rent de hello. Vue Apollo ne peut pas deviner quelle donnĂ©e vous souhaitez utiliser dans votre composant depuis le rĂ©sultat de la requĂȘte. Par dĂ©faut, il essaiera simplemnt le nom que vous utilisez pour la donnĂ©e dans le composant (la clĂ© dans l'objet apollo), dans notre cas, world. Si les noms ne correspondent pas, vous ppuvez utiliser l'option update pour dire Ă  Vue Apollo quelle donnĂ©e utiliser dans le rĂ©sultat :

apollo: {
  world: {
    query: gql`query {
      hello
    }`,
    update: data => data.hello
  }
}

Vous pouvez Ă©galement renommer le champ directement dans le document GraphQL :

apollo: {
  world: gql`query {
    world: hello
  }`
}

Dans cet exemple, nous renommons le champ hello en world, pour que Vue Apollo puisse automatiquement inférer ce qu'il doit récupérer depuis le résultat.

# RequĂȘte avec des paramĂštres

Vous pouvez ajouter des variables (et d'autres paramĂštres) Ă  votre requĂȘte gql en dĂ©clarant query et variables dans l'objet au lieu de la requĂȘte GraphQL :

// Options spécifiques à Apollo
apollo: {
  // RequĂȘte avec des paramĂštres
  ping: {
    // RequĂȘte gql
    query: gql`query PingMessage($message: String!) {
      ping(message: $message)
    }`,
    // ParamĂštres statiques
    variables: {
      message: 'Meow',
    },
  },
},

Vous pouvez utiliser les options Apollo watchQuery dans l'objet, comme ceci :

  • fetchPolicy
  • pollInterval
  • ...

Consulter la documentation d'Apollo (opens new window) pour plus de détails.

Par exemple, vous pouvez ajouter l'option Apollo fetchPolicy comme ceci :

apollo: {
  // RequĂȘte avec des paramĂštres
  ping: {
    query: gql`query PingMessage($message: String!) {
      ping(message: $message)
    }`,
    variables: {
      message: 'Meow'
    },
    // Options supplémentaires
    fetchPolicy: 'cache-and-network',
  },
},

À nouveau, vous pouvez utiliser votre propriĂ©tĂ© dans votre composant Vue :

data () {
  return {
    // Initialisation de votre donnée Apollo
    ping: '',
  }
},

CÎté serveur, ajoutez le schéma et le résolveur correspondants :

export const schema = `
type Query {
  ping(message: String!): String
}

schema {
  query: Query
}
`

export const resolvers = {
  Query: {
    ping (root, { message }, context) {
      return `RĂ©ponse Ă  ${message}`
    },
  },
}

Et vous pouvez l'utiliser dans votre composant Vue :

<template>
  <div class="apollo">
    <h3>Ping</h3>
    <p>
      {{ ping }}
    </p>
  </div>
</template>

# État de chargement

Vous pouvez afficher un Ă©tat de chargement grĂące Ă  la prop $apollo.loading :

<div v-if="$apollo.loading">Chargement...</div>

Ou bien cette requĂȘte spĂ©cifique ping :

<div v-if="$apollo.queries.ping.loading">Chargement...</div>

# Fonction d'options

Vous pouvez utiliser une fonction qui sera appelée quand le composant est créé, et qui retourne l'objet d'options :

// Options spécifiques à Apollo
apollo: {
  // RequĂȘte avec des paramĂštres
  ping () {
    // Appelé lors de la création du composant
    // Doit retourner un objet d'options
    return {
      // RequĂȘte gql
      query: gql`query PingMessage($message: String!) {
        ping(message: $message)
      }`,
      // ParamĂštres statiques
      variables: {
        message: 'Miaou',
      },
    }
  },
},

TIP

Cela fonctionne Ă©galement pour les souscriptions.

# DĂ©finition de requĂȘte rĂ©active

Vous pouvez utiliser une fonction pour l'option query. Cela rafraĂźchira la dĂ©finition de requĂȘte GraphQL automatiquement :

// Le libellĂ© mis en avant peut ĂȘtre soit un libellĂ© au hasard, ou bien le dernier ajoutĂ©
featuredTag: {
  query () {
    // Vous pouvez accéder à l'instance du composant avec 'this'
    if (this.showTag === 'random') {
      return gql`{
        randomTag {
          id
          label
          type
        }
      }`
    } else if (this.showTag === 'last') {
      return gql`{
        lastTag {
          id
          label
          type
        }
      }`
    }
  },
  // Nous devons assigner la valeur de la propriété 'featuredTag' du composant
  update: data => data.randomTag || data.lastTag,
},

TIP

Cela fonctionne Ă©galement pour les souscriptions.

# ParamÚtres réactifs

Vous pouvez utiliser une fonction pour rendre les paramÚtres réactifs avec les propriétés Vue :

// Options spécifiques à Apollo
apollo: {
  // RequĂȘte avec des paramĂštres
  ping: {
    query: gql`query PingMessage($message: String!) {
      ping(message: $message)
    }`,
    // ParamÚtres réactifs
    variables () {
      // Utilisez des propriétés réactives Vue
      return {
          message: this.pingInput,
      }
    },
  },
},

Cela requĂȘtera Ă  nouveau Ă  chaque fois qu'un paramĂštre change, par exemple :

<template>
  <div class="apollo">
    <h3>Ping</h3>
    <input v-model="pingInput" placeholder="Saisissez un message" />
    <p>
      {{ping}}
    </p>
  </div>
</template>

# Sauter la requĂȘte

Si la requĂȘte est sautĂ©e, elle est dĂ©sactivĂ©e et ne sera plus mise Ă  jour. Vous pouvez utiliser l'options skip :

// Options spécifiques à Apollo
apollo: {
  tags: {
    // RequĂȘte GraphQL
    query: gql`query tagList ($type: String!) {
      tags(type: $type) {
        id
        label
      }
    }`,
    // Variables réactives
    variables () {
      return {
        type: this.type,
      }
    },
    // DĂ©sactivation de la requĂȘte
    skip () {
      return this.skipQuery
    },
  },
},

Ici, skip est appelé automatiquement dÚs que la propriété skipSubscription du composant change.

Vous pouvez aussi accéder à la souscription directemnt et assigner la propriété skip :

this.$apollo.queries.tags.skip = true

Si la requĂȘte skip devient false, la requĂȘte s'exĂ©cutera Ă  nouveau automatiquement.

# Exemple de requĂȘte rĂ©axctive

Voici un exemple de requĂȘte rĂ©active utilisant le polling :

// Options spécifiques à Apollo
apollo: {
  // Propriété `tags` sur l'instance Vue
  tags: {
    query: gql`query tagList {
      tags {
        id,
        label
      }
    }`,
    pollInterval: 300, // millisecondes
  },
},

Voici Ă  quoi ressemble le serveur :

export const schema = `
type Tag {
  id: Int
  label: String
}

type Query {
  tags: [Tag]
}

schema {
  query: Query
}
`


// Faux générateur de mots
import casual from 'casual'

// Générons quelques libellés
var id = 0
var tags = []
for (let i = 0; i < 42; i++) {
  addTag(casual.word)
}

function addTag (label) {
  let t = {
    id: id++,
    label,
  }
  tags.push(t)
  return t
}

export const resolvers = {
  Query: {
    tags(root, args, context) {
      return tags
    },
  },
}

# Éditer une requĂȘte intelligente manuellement

Vous pouvez ajouter une requĂȘte intelligente manuellement avec la mĂ©thode $apollo.addSmartQuery(key, options) :

created () {
  this.$apollo.addSmartQuery('comments', {
    // Quelques options comme au-dessus
  })
}

TIP

En interne, cette méthode est appelée pour chaque entrée de l'option apollo du composant.

# Options avancées

Il y a encore bien d'autres options spécifiques à Vue Apollo, consultez la référence API.

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