📄 tanstack/query/latest/docs/framework/svelte/overview

<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>

Then call any function (e.g. createQuery) from any component:

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
---------

If you are using SvelteKit, please have a look at SSR & SvelteKit .

Available Functions
-------------------

Svelte Query offers useful functions and components that will make managing server state in Svelte apps easier.

createQuery
createQueries
createInfiniteQuery
createMutation
useQueryClient
useIsFetching
useIsMutating
useMutationState
useIsRestoring
useHydrate
<QueryClientProvider>
<HydrationBoundary>

Important Differences between Svelte Query & React Query
--------------------------------------------------------

Svelte Query offers an API similar to React Query, but there are some key differences to be mindful of.

The arguments to the create* functions must be wrapped in a function to preserve reactivity.

Edit on GitHub

Discord

Installation

Partners Become a Partner

[###### Want to Skip the Docs?

Query.gg - The Official React Query Course
\

“If you’re serious about *really* understanding React Query, there’s no better way than with query.gg”—Tanner Linsley

Learn More](https://query.gg/?s=tanstack)

scarf analytics