概述

更新于 2026-11-02 Svelte 查看英文原文 ↗

@tanstack/svelte-query 包为通过 Svelte 使用 TanStack Query 提供了一流的 API。

从 stores 迁移到 runes 语法？请参阅迁移指南。

示例

在项目的根部附近包含 QueryClientProvider：

svelte

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>

然后从任意组件中调用任意函数（例如 createQuery）：

svelte

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>

SvelteKit

如果你正在使用 SvelteKit，请参阅 SSR 与 SvelteKit。

可用函数

Svelte Query 提供了若干实用函数和组件，可让 Svelte 应用中的服务端状态（server state）管理更轻松。

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

Svelte Query 与 React Query 的重要差异

Svelte Query 提供的 API 与 React Query 类似，但存在一些关键差异，需特别注意。

create* 函数的参数必须包裹在函数中，以保持响应性。