Auf dieser Seite
Suspense
Solid Query kann auch mit Solid's Suspense API's verwendet werden.
Dazu müssen Sie Ihre suspendierbare Komponente mit der von Solid bereitgestellten Suspense Komponente umschließen.
import { Suspense } from 'solid-js'
;<Suspense fallback={<LoadingSpinner />}>
<SuspendableComponent />
</Suspense>
import { Suspense } from 'solid-js'
;<Suspense fallback={<LoadingSpinner />}>
<SuspendableComponent />
</Suspense>
Sie können die asynchrone suspense Funktion verwenden, die von solid-query bereitgestellt wird.
<script>
import { defineComponent } from 'vue'
import { useQuery } from '@tanstack/solid-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/solid-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
Standardmäßig funktioniert Solid Query im suspense Modus sehr gut als Fetch-on-render Lösung ohne zusätzliche Konfiguration. Das bedeutet, dass Ihre Komponenten beim Versuch, sie zu rendern, das Abrufen von Daten auslösen und pausieren, aber erst, nachdem Sie sie importiert und gerendert haben. Wenn Sie dies auf die nächste Stufe heben und ein Render-as-you-fetch Modell implementieren möchten, empfehlen wir die Implementierung von Prefetching bei Routing-Callbacks und/oder Benutzerinteraktionsereignissen, um das Laden von Abfragen zu starten, bevor sie gerendert werden, und hoffentlich sogar, bevor Sie mit dem Import oder Rendern ihrer übergeordneten Komponenten beginnen.
