useQuery zum Abrufen von Daten
useQuery(QUERY), result, loading, error, variables und Optionen für fetchPolicy
useQuery zum Abrufen von Daten ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Abfragen mit useQuery
Das Composable useQuery führt eine GraphQL-Abfrage aus und gibt einen reaktiven Zustand zurück. Es ruft die Daten automatisch erneut ab, wenn sich Variablen ändern, und aktualisiert sich bei Änderungen im Cache.
Grundlegende Verwendung
Übergeben Sie ein gql-Dokument. useQuery gibt die refs result, loading und error zurück.
import { useQuery } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'
const { result, loading, error } = useQuery(gql(
'query { posts { id title } }'
))Das Ergebnis auslesen
result ist eine ref. Greifen Sie über result.value auf die Daten zu – sie enthält die Abfrageantwort genau in der durch die Abfrage vorgegebenen Struktur.
const posts = computed(() => result.value?.posts ?? [])Lade- und Fehlerzustände
Verwenden Sie loading, um einen Ladeindikator anzuzeigen, und error, um eine Nachricht anzuzeigen. Beide sind reaktive refs, die während des Ablaufs der Anfrage aktualisiert werden.
<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>Abfragevariablen
Übergeben Sie Variablen als zweites Argument. Die Abfrage wird jedes Mal erneut ausgeführt, wenn sich ein Variablenwert ändert.
const { result } = useQuery(
gql('query($id: ID!) { post(id: $id) { title } }'),
{ id: 1 }
)Reaktive Variablen
Für dynamische Variablen übergeben Sie eine Funktion, die das Variablenobjekt zurückgibt, oder eine reaktive ref. Wenn sich eine referenzierte ref ändert, ruft die Abfrage die Daten automatisch erneut ab.
const id = ref(1)
const { result } = useQuery(
gql('query($id: ID!) { post(id: $id) { title } }'),
() => ({ id: id.value })
)Der onResult-Hook
onResult wird jedes Mal ausgelöst, wenn neue Daten eintreffen – nützlich für Seiteneffekte wie Analytics oder die Synchronisierung mit einem anderen Store.
const { onResult } = useQuery(QUERY)
onResult((res) => {
console.log('Got', res.data)
})Manuelles erneutes Abrufen
useQuery gibt eine refetch-Funktion zurück, mit der Sie die Abfrage bei Bedarf erneut ausführen können – etwa nach einer externen Änderung oder über eine Aktualisierungsschaltfläche.
const { result, refetch } = useQuery(QUERY)
function reload() { refetch() }Paginierung mit fetchMore
fetchMore lädt zusätzliche Seiten und führt sie mithilfe von updateQuery mit dem bestehenden Ergebnis zusammen – die Grundlage für Infinite Scrolling.
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-Policies
Die Option fetchPolicy steuert die Cache-Nutzung: cache-first liest standardmäßig zuerst aus dem Cache und danach aus dem Netzwerk, network-only fragt immer den Server ab, cache-and-network zeigt den Cache an und aktualisiert anschließend die Daten.
useQuery(QUERY, null, {
fetchPolicy: 'cache-and-network'
})Bedingte Abfragen
Verwenden Sie die Option enabled, um eine Abfrage zu verzögern, bis eine Bedingung erfüllt ist – rufen Sie beispielsweise erst dann Daten ab, wenn eine id ausgewählt wurde.
const id = ref(null)
useQuery(QUERY, () => ({ id: id.value }), {
enabled: computed(() => id.value !== null)
})Schnelltest
Testen Sie Ihr Wissen über useQuery.
Zusammenfassung
Sie haben useQuery gelernt:
- Es gibt result, loading und error reaktiv zurück.
- Lesen Sie die Daten über result.value aus.
- Übergeben Sie Variablen als Objekt oder als Funktion, um Reaktivität zu ermöglichen.
- refetch() führt die Abfrage erneut aus, fetchMore() übernimmt die Paginierung und fetchPolicy steuert die Cache-Nutzung.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 42
- Lektionen
- 156
Häufig gestellte Fragen
Ist die Lektion „useQuery zum Abrufen von Daten“ kostenlos?
Ja — der vollständige Text von „useQuery zum Abrufen von Daten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „useQuery zum Abrufen von Daten“?
useQuery(QUERY), result, loading, error, variables und Optionen für fetchPolicy Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „useQuery zum Abrufen von Daten“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Apollo-Client-Einrichtung in Vue 3
- useQuery zum Abrufen von Daten
- useMutation für Datenänderungen
- Echtzeit-Subscriptions mit useSubscription