TanStack Query Svelte

https://tanstack.com/query/latest/docs/framework/svelte/overview

Admin

The @tanstack/svelte-query package offers a first-class API for using TanStack Query with Svelte,...

Tokens:589

Snippets:9

Trust Score:10

Update:4 months ago

Show doc for...

Tokens:

Raw

### Setup QueryClientProvider in Svelte

Source: https://tanstack.com/query/latest/docs/framework/svelte/overview

Include the QueryClientProvider near the root of your Svelte application to manage queries. Ensure QueryClient is instantiated.

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

--------------------------------

### Fetch Data with createQuery in Svelte

Source: https://tanstack.com/query/latest/docs/framework/svelte/overview

Use the createQuery function to fetch and manage server state within any Svelte component. The arguments to create* functions must be wrapped in a function to preserve reactivity.

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

Tokens:

Raw