Auf dieser Seite
Suspense (experimentell)
HINWEIS: Der Suspense-Modus für Vue Query ist experimentell, genau wie Vues Suspense selbst. Diese APIs WERDEN sich ändern und sollten nicht in der Produktion verwendet werden, es sei denn, Sie sperren sowohl Ihre Vue- als auch Ihre Vue Query-Versionen auf Patch-Level-Versionen, die miteinander kompatibel sind.
Vue Query kann auch mit Vues neuem Suspense API verwendet werden.
Um dies zu tun, müssen Sie Ihre suspendierbare Komponente mit der von Vue bereitgestellten Suspense Komponente umschließen.
<script setup>
import SuspendableComponent from './SuspendableComponent.vue'
</script>
<template>
<Suspense>
<template #default>
<SuspendableComponent />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
</template>
<script setup>
import SuspendableComponent from './SuspendableComponent.vue'
</script>
<template>
<Suspense>
<template #default>
<SuspendableComponent />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
</template>
Und ändern Sie Ihre setup Funktion in der suspendierbaren Komponente zu async. Dann können Sie die asynchrone suspense Funktion verwenden, die von vue-query bereitgestellt wird.
<script>
import { defineComponent } from 'vue'
import { useQuery } from '@tanstack/vue-query'
const todoFetcher = async () =>
await fetch('https://jsonplaceholder.cypress.io/todos').then((response) =>
response.json(),
)
export default defineComponent({
name: 'SuspendableComponent',
async setup() {
const { data, suspense } = useQuery(['todos'], todoFetcher)
await suspense()
return { data }
},
})
</script>
<script>
import { defineComponent } from 'vue'
import { useQuery } from '@tanstack/vue-query'
const todoFetcher = async () =>
await fetch('https://jsonplaceholder.cypress.io/todos').then((response) =>
response.json(),
)
export default defineComponent({
name: 'SuspendableComponent',
async setup() {
const { data, suspense } = useQuery(['todos'], todoFetcher)
await suspense()
return { data }
},
})
</script>
Fetch-on-render vs Render-as-you-fetch
Out of the box funktioniert Vue Query im suspense Modus sehr gut als Fetch-on-render Lösung ohne zusätzliche Konfiguration. Das bedeutet, dass Ihre Komponenten beim Versuch des Mountens das Abrufen von Abfragen auslösen und suspendieren, aber erst, nachdem Sie sie importiert und gemountet haben. Wenn Sie es auf die nächste Stufe bringen und ein Render-as-you-fetch Modell implementieren möchten, empfehlen wir die Implementierung von Prefetching bei Routing-Callbacks und/oder Benutzerinteraktionsereignissen, um mit dem Laden von Abfragen zu beginnen, bevor sie gemountet werden, und hoffentlich sogar bevor Sie mit dem Importieren oder Mounten ihrer übergeordneten Komponenten beginnen.
