安装 TanStack Svelte Querytanstack/svelte-query完整指南从 NPM/pnpm/yarn/bun 到最小可用配置【免费下载链接】query Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.项目地址: https://gitcode.com/GitHub_Trending/qu/querytanstack/svelte-query是 TanStack Query 面向 Svelte 的一等公民封装为 Svelte 应用提供异步数据获取、服务端状态管理与缓存能力。本文基于 TanStack Query 仓库中的 Svelte 安装文档完整讲解各包管理器下的安装命令、Svelte 版本兼容前提、devtools 与持久化等配套包并结合仓库源码与示例工程给出安装后的验证方法与最小可用配置帮助你开箱即用地把 Svelte Query 接入项目。安装前提Svelte 5 与 Node 环境在动手安装前先确认你的项目满足tanstack/svelte-query的运行时要求。查看 packages/svelte-query/package.json 可以发现该包声明的 peer dependency 为peerDependencies: { svelte: ^5.25.0 }这意味着当前版本的 Svelte Query 依赖 Svelte 5 的 runes 语法$state、$derived等响应式原语来实现细粒度的属性追踪安装时请确保项目的 Svelte 版本在^5.25.0以上。同时包本身以 ESM 形式发布type: module内部只依赖tanstack/query-coreworkspace 内为workspace:*发布后为对应版本因此安装时无需额外手动引入 query-core它会作为依赖自动安装。使用任意主流包管理器安装官方安装文档提供了四种等价的安装方式任选其一即可NPMnpm i tanstack/svelte-querypnpmpnpm add tanstack/svelte-queryYarnyarn add tanstack/svelte-queryBunbun add tanstack/svelte-query安装完成后tanstack/svelte-query会出现在项目的dependencies中。仓库内的 Svelte 示例工程 同样以此方式声明依赖dependencies: { tanstack/svelte-query: ^6.1.48, tanstack/svelte-query-devtools: ^6.1.48 }你可以参照它确认版本号写法与配套包的组合方式。安装后验证从包入口确认 API 完整可用安装完成并不意味着万事大吉建议通过包的导出入口快速验证。查看 packages/svelte-query/src/index.ts该包对外导出如下能力重新导出全部tanstack/query-coreQueryClient、QueryCache、MutationCache等响应式原语createQuery、createQueries、createInfiniteQuery、createMutation辅助工具queryOptions、infiniteQueryOptions、mutationOptions钩子类函数useQueryClient、useIsFetching、useIsMutating、useMutationState、useIsRestoring、useHydrate组件QueryClientProvider、HydrationBoundary在终端执行一条验证命令确认核心导入可用node -e import(tanstack/svelte-query).then(m console.log(Object.keys(m).slice(0, 10).join(, )))对于 Svelte 组件项目更稳妥的做法是直接运行npm run dev并在组件中import { createQuery } from tanstack/svelte-query由 Svelte 编译器做完整解析。按需安装配套包devtools 与持久化tanstack/svelte-query采用“核心包 可选包”的分层设计与安装文档同目录的 devtools 文档 说明了可视化调试工具的安装方式npm i tanstack/svelte-query-devtools或使用 pnpm / yarn / bunpnpm add tanstack/svelte-query-devtools yarn add tanstack/svelte-query-devtools bun add tanstack/svelte-query-devtools安装后按如下方式接入script import { QueryClientProvider } from tanstack/svelte-query import { SvelteQueryDevtools } from tanstack/svelte-query-devtools /script QueryClientProvider client{queryClient} !-- 你的应用 -- SvelteQueryDevtools / /QueryClientProvider仓库中的 basic 示例 演示了 devtools 与持久化插件的组合用法——它同时引入了tanstack/svelte-query-persist-client的PersistQueryClientProvider和tanstack/query-async-storage-persister的createAsyncStoragePersister把查询缓存持久化到localStorage。若你需要离线缓存能力可参照该示例一并安装这两个包。所有包的历史变更记录可查阅对应目录下的 CHANGELOG.md如 packages/svelte-query/CHANGELOG.md。安装后的最小可用配置安装文档结尾提到的 basic 示例 是最佳上手参照。一个最小可运行的应用需要两步第一步在应用根部用QueryClientProvider注入一个QueryClient实例参见 overview 文档script langts import { QueryClient, QueryClientProvider } from tanstack/svelte-query import Example from ./lib/Example.svelte const queryClient new QueryClient() /script QueryClientProvider client{queryClient} Example / /QueryClientProviderQueryClientProvider的底层实现packages/svelte-query/src/QueryClientProvider.svelte会在挂载时调用client.mount()、卸载时调用client.unmount()并通过 Svelte 的 context APIsetQueryClientContext向下传递实例因此组件树中的任何组件都能通过useQueryClient拿到它。第二步在任意子组件中使用createQuery发起查询script langts import { createQuery } from tanstack/svelte-query const query createQuery(() ({ queryKey: [todos], queryFn: () fetchTodos(), })) /script div {#if query.isPending} pLoading.../p {:else if query.isError} pError: {query.error.message}/p {:else if query.isSuccess} {#each query.data as todo} p{todo.title}/p {/each} {/if} /div注意与 React Query 的差异Svelte Query 的create*函数要求把选项对象包裹在一个函数中createQuery(() ({ ... }))以保证在 Svelte 的响应式作用域内被追踪返回的query是一个代理对象属性isPending、isError、data、error在响应式上下文中动态解析不要在模板外对其解构。安装后的升级与迁移提示仓库同时提供了从 Svelte Query v5基于 stores迁移到 v6基于 runes的完整指南见 migrate-from-v5-to-v6.md。如果你正在升级依赖版本建议先阅读该文档了解 breaking changes升级完成后记得同步更新配套包devtools、persist-client到同一主版本避免版本错配。小结通过npm i tanstack/svelte-query或 pnpm / yarn / bun 等价命令即可完成核心安装前提是 Svelte 版本^5.25.0。核心包自带query-core依赖无需额外安装devtoolstanstack/svelte-query-devtools与持久化tanstack/svelte-query-persist-clienttanstack/query-async-storage-persister按需追加。安装后可参考 examples/svelte/simple 与 examples/svelte/basic 两个示例工程验证安装结果若使用 SvelteKit 并开启 SSR还需要阅读 SSR SvelteKit 指南用$app/environment的browser标志关闭服务端查询执行。【免费下载链接】query Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.项目地址: https://gitcode.com/GitHub_Trending/qu/query创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
