The @tanstack/svelte-query
package offers a 1st-class API for using TanStack Query via Svelte.
Include the QueryClientProvider near the root of your project:
<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>
Then call any function (e.g. createQuery) from any component:
<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>
If you are using SvelteKit, please have a look at SSR & SvelteKit.
Svelte Query offers useful functions and components that will make managing server state in Svelte apps easier.
createQuery
createQueries
createInfiniteQuery
createMutation
useQueryClient
useIsFetching
useIsMutating
useHydrate
<QueryClientProvider>
<Hydrate>
Svelte Query offers an API similar to React Query, but there are some key differences to be mindful of.
$
. You can learn more about Svelte stores here.“This course is the best way to learn how to use React Query in real-world applications.”—Tanner LinsleyCheck it out