useQuery per il recupero dei dati
useQuery(QUERY), result, loading, error, variables, opzioni fetchPolicy.
useQuery per il recupero dei dati è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 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.
Esecuzione di query con useQuery
Il composable useQuery esegue una query GraphQL e restituisce uno stato reattivo. Esegue automaticamente un nuovo fetch quando cambiano le variabili e si aggiorna quando cambia la cache.
Utilizzo di base
Passi un documento gql. useQuery restituisce i ref result, loading ed error.
import { useQuery } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'
const { result, loading, error } = useQuery(gql(
'query { posts { id title } }'
))Lettura del risultato
result è un ref. Acceda ai dati tramite result.value: contiene la risposta della query strutturata esattamente come la query.
const posts = computed(() => result.value?.posts ?? [])Stati di caricamento ed errore
Utilizzi loading per mostrare uno spinner ed error per mostrare un messaggio. Entrambi sono ref reattivi che si aggiornano durante l'avanzamento della richiesta.
<template>
<p v-if="loading">Loading...</p>
<p v-else-if="error">{{ error.message }}</p>
<ul v-else>
<li v-for="p in posts" :key="p.id">{{ p.title }}</li>
</ul>
</template>Variabili della query
Passi le variabili come secondo argomento. La query viene eseguita nuovamente ogni volta che cambia il valore di una variabile.
const { result } = useQuery(
gql('query($id: ID!) { post(id: $id) { title } }'),
{ id: 1 }
)Variabili reattive
Per le variabili dinamiche, passi una funzione che restituisce l'oggetto delle variabili oppure un ref reattivo. Quando cambia un ref utilizzato, la query esegue automaticamente un nuovo fetch.
const id = ref(1)
const { result } = useQuery(
gql('query($id: ID!) { post(id: $id) { title } }'),
() => ({ id: id.value })
)L'hook onResult
onResult viene eseguito ogni volta che arrivano nuovi dati: è utile per effetti collaterali come l'analisi o la sincronizzazione con un altro store.
const { onResult } = useQuery(QUERY)
onResult((res) => {
console.log('Got', res.data)
})Nuovo fetch manuale
useQuery restituisce una funzione refetch per eseguire nuovamente la query su richiesta, ad esempio dopo una modifica esterna o tramite un pulsante di aggiornamento.
const { result, refetch } = useQuery(QUERY)
function reload() { refetch() }Paginazione con fetchMore
fetchMore carica pagine aggiuntive e le unisce al risultato esistente utilizzando updateQuery: è la base dello scorrimento infinito.
const { result, fetchMore } = useQuery(QUERY, { offset: 0 })
function loadMore() {
fetchMore({
variables: { offset: result.value.posts.length },
updateQuery: (prev, { fetchMoreResult }) => ({
posts: [...prev.posts, ...fetchMoreResult.posts]
})
})
}Fetch policy
L'opzione fetchPolicy controlla l'uso della cache: cache-first (predefinita) legge dalla cache prima di eseguire una richiesta di rete, network-only interroga sempre il server, cache-and-network mostra la cache e poi aggiorna i dati.
useQuery(QUERY, null, {
fetchPolicy: 'cache-and-network'
})Query condizionali
Utilizzi l'opzione enabled per ritardare una query finché non viene soddisfatta una condizione, ad esempio per non eseguire il fetch finché non viene selezionato un id.
const id = ref(null)
useQuery(QUERY, () => ({ id: id.value }), {
enabled: computed(() => id.value !== null)
})Verifica rapida
Verifichi la sua conoscenza di useQuery.
Riepilogo
Ha imparato a utilizzare useQuery:
- Restituisce result, loading ed error reattivi.
- Legga i dati tramite result.value.
- Passi le variabili come oggetto o funzione per renderle reattive.
- refetch() esegue nuovamente la query, fetchMore() gestisce la paginazione e fetchPolicy controlla l'uso della cache.
Domande Frequenti
La lezione «useQuery per il recupero dei dati» è gratuita?
Sì — il testo completo di «useQuery per il recupero dei dati» è 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 «useQuery per il recupero dei dati»?
useQuery(QUERY), result, loading, error, variables, opzioni fetchPolicy. 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 2 di 4.
Quanto tempo richiede la lezione «useQuery per il recupero dei dati»?
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
- Configurazione di Apollo Client in Vue 3
- useQuery per il recupero dei dati
- useMutation per modificare i dati
- Subscription in tempo reale con useSubscription