# 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 par graphql-tag) ou bien une fonction qui reçoit le gabarit gql comme argument et doit retourner la requĂȘte transformĂ©e
  • variables: objet de variables GraphQL
  • fetchPolicy: consultez l'option fetchPolicy d'Apollo (opens new window)
  • pollInterval: consultez l'option pollInterval d'Apollo (opens new window)
  • notifyOnNetworkStatusChange: consultez l'option notifyOnNetworkStatusChange d'Apollo (opens new window)
  • context: consultez l'option context d'Apollo (opens new window)
  • update: une fonction qui transforme le rĂ©sultat data, 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ĂȘtage
  • clientId: l'identifiant du client Apollo utilisĂ© par la requĂȘte (dĂ©fini dans l'option clients d'ApolloProvider)
  • deep: boolĂ©en pour permettre l'utilisation d'observateurs Vue imbriquĂ©s
  • tag: le nom de la balise HTML (par dĂ©faut: div); si Ă©value Ă  false (par exemple null ou undefined), 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 rendu
  • debounce: 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: si false, 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 Query
    • result.data: donnĂ©e retournĂ©e par la requĂȘte (peut ĂȘtre transformĂ©e dans la prop update)
    • result.fullData: donnĂ©e brute retournĂ©e par la requĂȘte (non transformĂ©e dans la prop update)
    • result.loading: un boolĂ©en qui indique si requĂȘte est en cours (il est possible que vous deviez assigner la prop notifyOnNetworkStatusChange pour qu'il se mette Ă  jour)
    • result.error: erreur Ă©vntuelle pour le rĂ©sultat en cours
    • result.networkStatus: consultez l'option networkStatus d'Apollo (opens new window)
  • query: requĂȘte intelligente associĂ©e au composant. C'est pratique pour exĂ©cuter certaines opĂ©rations comme query.refetch ou bien query.fetchMore.
  • isLoading: Ă©tat de chargement de la requĂȘte intelligente
  • gqlError: la premiĂšre erreur GraphQL Ă©vntuelle
  • times: combien de fois le rĂ©sultat a Ă©tĂ© mis Ă  jour

# ÉvĂ©nements

  • result(resultObject)
  • error(errorObject)
  • loading(boolean)
DerniĂšre mise Ă  jour: 11/02/2021, 11:08:30