译零 TransZero · TanStack Query 中文文档
主站

Svelte v6 适配器(使用 runes)

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

尽管 Svelte v5 对 Svelte v3/v4 的 stores 语法保留了向后兼容性,但该适配器在使用此兼容模式时存在一些 bug 且不可靠。@tanstack/svelte-query v6 适配器已完全迁移到 runes 语法,该语法依赖 signals。此次重写还应简化确保查询输入保持响应式的所需代码。

安装

请确保你的项目已安装 Svelte v5.25.0 或更高版本。

运行 pnpm add @tanstack/svelte-query@latest(或你所用包管理器的对应命令)。

注意:@tanstack/svelte-query v6 依赖 @tanstack/query-core v5。

函数输入

与 Angular 和 Solid 适配器类似,Svelte 适配器的大多数函数现在要求将选项作为「thunk」(() => options)传入,以提供响应式能力。TypeScript 在此处会为你提供帮助,并在你遗漏该语法时发出警告。

TypeScript
1- const query = createQuery({  // [!code --]2+ const query = createQuery(() => ({ // [!code ++]3    queryKey: ['todos'],4    queryFn: () => fetchTodos(),5- }) // [!code --]6+ })) // [!code ++]

访问属性

由于该适配器不再使用 stores,因此不再需要以 $ 为前缀。

svelte
1- {#if $todos.isSuccess} // [!code --]2+ {#if todos.isSuccess} // [!code ++]3    <ul>4-     {#each $todos.data.items as item} // [!code --]5+     {#each todos.data.items as item} // [!code ++]6        <li>{item}</li>7      {/each}8    </ul>9  {/if}

响应式

你此前可能需要对 stores 做一些特殊处理,才能使输入具备响应式。这种情况已不复存在!你甚至无需将查询包裹在 $derived 中。

TypeScript
1- const intervalMs = writable(1000) // [!code --]2+ let intervalMs = $state(1000) // [!code ++]3 4- const query = createQuery(derived(intervalMs, ($intervalMs) => ({ // [!code --]5+ const query = createQuery(() => ({ // [!code ++]6    queryKey: ['refetch'],7    queryFn: async () => await fetch('/api/data').then((r) => r.json()),8-   refetchInterval: $intervalMs, // [!code --]9+   refetchInterval: intervalMs, // [!code ++]10- }))) // [!code --]11+ })) // [!code ++]

禁用遗留模式

如果你的组件中仍存在任何 stores,则可能无法正确切换至 runes 模式。你可以通过以下两种方式确保应用使用 runes:

按文件粒度启用

在每个 .svelte 文件中,完成向 runes 的迁移后,添加 <svelte:options runes={true} />。这种方式更适合需逐步迁移的大型应用。

全局启用

在你的 svelte.config.js 中,将以下配置加入 config:

JSON
1  compilerOptions: {2    runes: true,3  },

该配置仅应在你的应用中 100% 移除所有 stores 语法后添加。

本页为 TanStack Query 文档(Svelte 版)的非官方中文翻译,原文由上游团队维护,遵循 MIT 许可。 译文如有偏差,以英文原文为准。

译自上游 59d11de