# 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.