Svelte v6 适配器(使用 runes)
尽管 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-queryv6 依赖@tanstack/query-corev5。
函数输入
与 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 语法后添加。