# Composant ApolloQuery
Exemple :
<ApolloQuery
:query="gql => gql`
query MyHelloQuery ($name: String!) {
hello (name: $name)
}
`"
:variables="{ name }"
>
<template v-slot="{ result: { error, data }, isLoading }">
<!-- Chargement -->
<div v-if="isLoading" class="loading apollo">Chargement...</div>
<!-- Erreur -->
<div v-else-if="error" class="error apollo">Une erreur est survenue.</div>
<!-- RĂ©sultat -->
<div v-else-if="data" class="result apollo">{{ data.hello }}</div>
<!-- Pas de résultat -->
<div v-else class="no-result apollo">Pas de résultat :(</div>
</template>
</ApolloQuery>
WARNING
Pour activer le support du gabarit étiqueté gql
dans les templates Vue, consultez l'étape nécessaire dans le guide.
# Props
query
: une requĂȘte GraphQL (transformĂ©e pargraphql-tag
) ou bien une fonction qui reçoit le gabaritgql
comme argument et doit retourner la requĂȘte transformĂ©evariables
: objet de variables GraphQLfetchPolicy
: consultez l'optionfetchPolicy
d'Apollo (opens new window)pollInterval
: consultez l'optionpollInterval
d'Apollo (opens new window)notifyOnNetworkStatusChange
: consultez l'optionnotifyOnNetworkStatusChange
d'Apollo (opens new window)context
: consultez l'optioncontext
d'Apollo (opens new window)update
: une fonction qui transforme le résultatdata
, pratique pour récupérer des parties spécifiques de la réponse. Exemple ::update="data => data.user.messages"
skip
: un boolĂ©en qui dĂ©sative le requĂȘtageclientId
: l'identifiant du client Apollo utilisĂ© par la requĂȘte (dĂ©fini dans l'optionclients
d'ApolloProvider)deep
: booléen pour permettre l'utilisation d'observateurs Vue imbriquéstag
: le nom de la balise HTML (par défaut:div
); si Ă©value Ăfalse
(par exemplenull
ouundefined
), le composant n'a pas de rendu (le contenu ne sera pas englobé dans une balise), et dans ce cas, uniquement le premier enfant sera rendudebounce
: nombre de millisecondes pour stabiliser les nouvelles requĂȘtes (par exemple quand les variables changent)throttle
: nombre de millisecondes pour rĂ©guler les nouvelles requĂȘtes (par exemple quand les variables changent)prefetch
: sifalse
, pas de prĂ©-requĂȘte lors du rendu cĂŽtĂ© serveur (SSR)options
: autres options Apollo Watch Query
# Slots avec portée
result
: résulta Apollo Queryresult.data
: donnĂ©e retournĂ©e par la requĂȘte (peut ĂȘtre transformĂ©e dans la propupdate
)result.fullData
: donnĂ©e brute retournĂ©e par la requĂȘte (non transformĂ©e dans la propupdate
)result.loading
: un boolĂ©en qui indique si requĂȘte est en cours (il est possible que vous deviez assigner la propnotifyOnNetworkStatusChange
pour qu'il se mette Ă jour)result.error
: erreur évntuelle pour le résultat en coursresult.networkStatus
: consultez l'optionnetworkStatus
d'Apollo (opens new window)
query
: requĂȘte intelligente associĂ©e au composant. C'est pratique pour exĂ©cuter certaines opĂ©rations commequery.refetch
ou bienquery.fetchMore
.isLoading
: Ă©tat de chargement de la requĂȘte intelligentegqlError
: la premiĂšre erreur GraphQL Ă©vntuelletimes
: combien de fois le résultat a été mis à jour
# ĂvĂ©nements
result(resultObject)
error(errorObject)
loading(boolean)