快速开始

1<script lang="ts">2  import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'3  import Example from './lib/Example.svelte'4 5  const queryClient = new QueryClient()6</script>7 8<QueryClientProvider client={queryClient}>9  <Example />10</QueryClientProvider>

1<script lang="ts">2  import { createQuery } from '@tanstack/svelte-query'3 4  const query = createQuery(() => ({5    queryKey: ['todos'],6    queryFn: () => fetchTodos(),7  }))8</script>9 10<div>11  {#if query.isPending}12    <p>Loading...</p>13  {:else if query.isError}14    <p>Error: {query.error.message}</p>15  {:else if query.isSuccess}16    {#each query.data as todo}17      <p>{todo.title}</p>18    {/each}19  {/if}20</div>

1// ❌ react version2useQuery({3  queryKey: ['todos', todo],4  queryFn: fetchTodos,5})6 7// ✅ svelte version8createQuery(() => ({9  queryKey: ['todos', todo],10  queryFn: fetchTodos,11}))

1<script lang="ts">2  import { createQuery } from '@tanstack/svelte-query'3 4  const query = createQuery(() => ({5    queryKey: ['repoData'],6    queryFn: () =>7      fetch('https://api.github.com/repos/TanStack/query').then((res) =>8        res.json(),9      ),10  }))11</script>12 13<!-- ❌ react version -- supports destructuring outside reactive context14  const { isPending, error, data } = useQuery({15    queryKey: ['repoData'],16    queryFn: () =>17      fetch('https://api.github.com/repos/TanStack/query').then(18        (res) => res.json(),19      ),20  }) -->21 22<!-- ✅ access query properties in svelte reactive context -->23<div>24  {#if query.isPending}25    <p>Loading...</p>26  {:else if query.isError}27    <p>Error: {query.error.message}</p>28  {:else if query.isSuccess}29    <div>30      <h1>{query.data.name}</h1>31      <p>{query.data.description}</p>32      <strong>👀 {query.data.subscribers_count}</strong>33      <strong>✨ {query.data.stargazers_count}</strong>34      <strong>🍴 {query.data.forks_count}</strong>35    </div>36  {/if}37</div>

1<script lang="ts">2  import { createQuery } from '@tanstack/svelte-query'3 4  let enabled = $state(false)5  let todoCount = $state(0)6 7  // ✅ passing a rune directly is safe and observers update8  // automatically when the value of a rune changes9  const todosQuery = createQuery(() => ({10    queryKey: ['todos'],11    queryFn: () => fetchTodos(),12    enabled: enabled,13  }))14 15  const todoDetailsQuery = createQuery(() => ({16    queryKey: ['todo', todoCount],17    queryFn: fetchTodo,18    enabled: todoCount > 0,19  }))20</script>21 22<div>23  {#if todosQuery.isPending}24    <p>Loading...</p>25  {:else if todosQuery.isError}26    <p>Error: {todosQuery.error.message}</p>27  {:else if todosQuery.isSuccess}28    {#each todosQuery.data as todo}29      <button onclick={() => (todoCount = todo.id)}>{todo.title}</button>30    {/each}31  {/if}32  <button onclick={() => (enabled = !enabled)}>Toggle enabled</button>33</div>