Übersicht
Das Paket @tanstack/svelte-query bietet eine erstklassige API für die Verwendung von TanStack Query über Svelte.
Beispiel
Integrieren Sie den QueryClientProvider nahe der Wurzel Ihres Projekts
svelte
<script lang="ts">
import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'
import Example from './lib/Example.svelte'
const queryClient = new QueryClient()
</script>
<QueryClientProvider client={queryClient}>
<Example />
</QueryClientProvider>
<script lang="ts">
import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'
import Example from './lib/Example.svelte'
const queryClient = new QueryClient()
</script>
<QueryClientProvider client={queryClient}>
<Example />
</QueryClientProvider>
Rufen Sie dann eine beliebige Funktion (z.B. createQuery) von einer beliebigen Komponente aus auf
svelte
<script lang="ts">
import { createQuery } from '@tanstack/svelte-query'
const query = createQuery({
queryKey: ['todos'],
queryFn: () => fetchTodos(),
})
</script>
<div>
{#if $query.isLoading}
<p>Loading...</p>
{:else if $query.isError}
<p>Error: {$query.error.message}</p>
{:else if $query.isSuccess}
{#each $query.data as todo}
<p>{todo.title}</p>
{/each}
{/if}
</div>
<script lang="ts">
import { createQuery } from '@tanstack/svelte-query'
const query = createQuery({
queryKey: ['todos'],
queryFn: () => fetchTodos(),
})
</script>
<div>
{#if $query.isLoading}
<p>Loading...</p>
{:else if $query.isError}
<p>Error: {$query.error.message}</p>
{:else if $query.isSuccess}
{#each $query.data as todo}
<p>{todo.title}</p>
{/each}
{/if}
</div>
SvelteKit
Wenn Sie SvelteKit verwenden, werfen Sie bitte einen Blick auf SSR & SvelteKit.
Verfügbare Funktionen
Svelte Query bietet nützliche Funktionen und Komponenten, die die Verwaltung von Serverzuständen in Svelte-Apps erleichtern.
- createQuery
- createQueries
- createInfiniteQuery
- createMutation
- useQueryClient
- useIsFetching
- useIsMutating
- useHydrate
- <QueryClientProvider>
- <HydrationBoundary>
Wichtige Unterschiede zwischen Svelte Query & React Query
Svelte Query bietet eine API, die der von React Query ähnelt, aber es gibt einige wichtige Unterschiede, die Sie beachten sollten.
- Viele der Funktionen in Svelte Query geben einen Svelte-Store zurück. Um Werte aus diesen Stores reaktiv abzurufen, müssen Sie dem Store ein $ voranstellen. Mehr über Svelte Stores erfahren Sie hier.
- Wenn Ihre Abfrage oder Mutation von Variablen abhängt, müssen Sie einen Store für die Optionen verwenden. Mehr dazu lesen Sie hier.
