Vue Academy · Leçon

Configurer Apollo Client dans Vue 3

ApolloClient, InMemoryCache, provideApolloClient() et configuration de @vue/apollo-composable

Configurer Apollo Client dans Vue 3 est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

GraphQL avec Vue

GraphQL permet au client de demander exactement les données dont il a besoin en une seule requête. Apollo Client est le client GraphQL le plus populaire, et @vue/apollo-composable l’intègre à l’API de composition de Vue 3.

Installer les paquets

Vous avez besoin du noyau Apollo, de l’analyseur GraphQL et de la couche de composition pour Vue.

npm install @apollo/client graphql @vue/apollo-composable

Créer le client

Un client Apollo a besoin d’une uri serveur et d’un cache. InMemoryCache stocke les résultats des requêtes afin que les lectures répétées soient instantanées.

import { ApolloClient, InMemoryCache } from '@apollo/client/core'

const apolloClient = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache()
})

Rôle du cache

InMemoryCache normalise les réponses en fonction de l’identifiant de l’entité. Lorsque deux requêtes renvoient le même objet, le cache ne le stocke qu’une fois, et sa mise à jour actualise toutes les vues qui l’utilisent.

Fournir le client

Enregistrez le client à l’échelle de l’application afin que chaque composant puisse exécuter des requêtes. La clé d’injection DefaultApolloClient le relie à l’API de composition.

import { DefaultApolloClient } from '@vue/apollo-composable'
import { createApp, provide, h } from 'vue'

const app = createApp({
  setup() {
    provide(DefaultApolloClient, apolloClient)
    return () => h(App)
  }
})

Plusieurs clients

Pour plusieurs points d’accès GraphQL, fournissez une map ApolloClients et donnez un nom à chaque client. Les composants en choisissent un grâce à l’option clientId.

import { ApolloClients } from '@vue/apollo-composable'

provide(ApolloClients, {
  default: apolloClient,
  analytics: analyticsClient
})

provideApolloClient

En dehors du setup d’un composant — par exemple dans un composable — utilisez provideApolloClient pour rendre le client disponible aux appels useQuery.

import { provideApolloClient } from '@vue/apollo-composable'

provideApolloClient(apolloClient)
// now useQuery works in this composable

Ajouter des en-têtes d’authentification

Les API réelles ont besoin d’un jeton d’authentification. Configurez headers dans les options du client ou utilisez un lien Apollo pour joindre le jeton à chaque requête.

const apolloClient = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  headers: {
    Authorization: 'Bearer ' + token
  }
})

Configurer les options par défaut

Le champ defaultOptions ajuste notamment la stratégie de récupération par défaut — par exemple pour toujours lire d’abord dans le cache.

const apolloClient = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  defaultOptions: {
    watchQuery: { fetchPolicy: 'cache-and-network' }
  }
})

Écrire votre première requête

Définissez une requête avec la balise de modèle gql provenant de @apollo/client/core. Elle analyse la chaîne GraphQL pour la transformer en document compris par Apollo.

import { gql } from '@apollo/client/core'

const GET_POSTS = gql(
  'query { posts { id title } }'
)

Vérifier la configuration

Une fois le client fourni, n’importe quel composant peut appeler useQuery avec ce document. Si les données reviennent, votre client et votre fournisseur sont correctement configurés.

Vérification rapide

Vérifiez vos connaissances sur la configuration d’Apollo.

Récapitulatif

Vous avez configuré Apollo dans Vue 3 :

Créez un ApolloClient avec une uri et InMemoryCache.
Le cache normalise les résultats en fonction de l’identifiant de l’entité.
Fournissez-le avec DefaultApolloClient (ou ApolloClients pour plusieurs clients).
Utilisez provideApolloClient dans les composables et définissez les requêtes avec gql.

Questions Fréquemment Posées

La leçon « Configurer Apollo Client dans Vue 3 » est-elle gratuite ?

Oui — le texte complet de « Configurer Apollo Client dans Vue 3 » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Configurer Apollo Client dans Vue 3 » ?

ApolloClient, InMemoryCache, provideApolloClient() et configuration de @vue/apollo-composable Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Configurer Apollo Client dans Vue 3 » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Configurer Apollo Client dans Vue 3
useQuery pour récupérer des données
useMutation pour modifier des données
Abonnements en temps réel avec useSubscription

← Retour à Vue Academy