0Pricing
Vue Academy · Lezione

Configurazione di Apollo Client in Vue 3

ApolloClient, InMemoryCache, provideApolloClient(), configurazione di @vue/apollo-composable.

Configurazione di Apollo Client in Vue 3 è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

GraphQL con Vue

GraphQL consente al client di richiedere esattamente i dati necessari in un'unica richiesta. Apollo Client è il client GraphQL più diffuso e @vue/apollo-composable lo integra con la Composition API di Vue 3.

Installazione dei pacchetti

Sono necessari il core di Apollo, il parser GraphQL e il livello di composable per Vue.

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

Creazione del client

Un client Apollo richiede un uri del server e una cache. InMemoryCache memorizza nella cache i risultati delle query, così le letture ripetute sono immediate.

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

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

Funzionamento della cache

InMemoryCache normalizza le risposte in base all'id dell'entità. Quando due query restituiscono lo stesso oggetto, la cache lo memorizza una sola volta e il suo aggiornamento aggiorna ogni vista che lo utilizza.

Fornitura del client

Registri il client a livello dell'intera applicazione, così ogni componente può eseguire query. La chiave di injection DefaultApolloClient lo collega alla Composition API.

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

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

Più client

Per più endpoint GraphQL, fornisca una mappa ApolloClients e assegni un nome a ogni client. I componenti ne scelgono uno tramite l'opzione clientId.

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

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

provideApolloClient

Al di fuori del setup di un componente, ad esempio all'interno di un composable, utilizzi provideApolloClient per rendere il client disponibile alle chiamate useQuery.

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

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

Aggiunta degli header di autenticazione

Le API reali richiedono un token di autenticazione. Configuri headers nelle opzioni del client oppure utilizzi un link Apollo per aggiungere il token a ogni richiesta.

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

Configurazione delle opzioni predefinite

Il campo defaultOptions regola comportamenti come la fetch policy predefinita, ad esempio leggendo sempre prima dalla cache.

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

Scrittura della prima query

Definisca una query con il template tag gql di @apollo/client/core. Questo analizza la stringa GraphQL trasformandola in un documento comprensibile da Apollo.

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

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

Verifica della configurazione

Una volta fornito il client, qualsiasi componente può chiamare useQuery con quel documento. Se i dati vengono restituiti, il client e il provider sono collegati correttamente.

Verifica rapida

Verifichi la sua conoscenza della configurazione di Apollo.

Riepilogo

Ha configurato Apollo in Vue 3:

  • Crei un ApolloClient con un uri e InMemoryCache.
  • La cache normalizza i risultati in base all'id dell'entità.
  • Lo fornisca con DefaultApolloClient (o ApolloClients per più client).
  • Utilizzi provideApolloClient nei composable e definisca le query con gql.

Domande Frequenti

La lezione «Configurazione di Apollo Client in Vue 3» è gratuita?

Sì — il testo completo di «Configurazione di Apollo Client in Vue 3» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Configurazione di Apollo Client in Vue 3»?

ApolloClient, InMemoryCache, provideApolloClient(), configurazione di @vue/apollo-composable. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Configurazione di Apollo Client in Vue 3»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Configurazione di Apollo Client in Vue 3
  2. useQuery per il recupero dei dati
  3. useMutation per modificare i dati
  4. Subscription in tempo reale con useSubscription
← Torna a Vue Academy