重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
tanstack-vue-query-skilld by harlan-zw/vue-ecosystem-skills
npx skills add https://github.com/harlan-zw/vue-ecosystem-skills --skill tanstack-vue-query-skilld@tanstack/vue-query用于在 Vue 中管理、缓存和同步异步及远程数据的钩子
版本: 5.95.2 依赖: @tanstack/match-sorter-utils@^8.19.4, @vue/devtools-api@^6.6.3, vue-demi@^0.14.10, @tanstack/query-core@5.95.2 标签: alpha: 5.0.0-alpha.91, beta: 5.0.0-beta.35, rc: 5.0.0-rc.16, previous: 4.43.0, latest: 5.95.2
参考: 文档 — API 参考、指南
本节记录了特定版本的 API 变更 — 请优先关注近期的主要/次要版本发布。
重大变更: useQuery 签名 — v5 要求一个单一的对象参数 { queryKey, queryFn, ... }。旧的位置参数不再受支持,将导致错误。来源
重大变更: useQueries 签名 — v5 现在接受一个包含 数组属性的对象:。这允许了额外的顶层选项,如 。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
queriesuseQueries({ queries: [...] })combine重大变更: useQueries 返回类型 — 现在返回一个结果数组的 Ref,而不是一个 reactive 数组,以确保与 Vue 2 更好的兼容性并避免扩展响应性丢失。来源
重大变更: 回调移除 — onSuccess、onError 和 onSettled 已从 useQuery、useInfiniteQuery 和 useQueries 中移除。请使用 select 进行数据转换,或改用全局的 QueryCache 回调。来源
重大变更: cacheTime 重命名 — 在所有选项和默认选项中重命名为 gcTime(垃圾回收时间),以更好地反映其用途。来源
重大变更: useInfiniteQuery 参数 — getNextPageParam 和 getPreviousPageParam 现在接收一个包含 lastPage、allPages、lastPageParam 和 allPageParams 的单一对象。来源
重大变更: keepPreviousData 移除 — 该选项已被 @tanstack/vue-query 中的 placeholderData: keepPreviousData 辅助函数取代。来源
新增: queryOptions / infiniteQueryOptions — 用于在组件之间安全地共享查询定义以及进行预取的辅助函数。来源
新增: useMutationState — 新的组合式函数,用于通过根据键或过滤器筛选特定变更来全局访问变更状态。
新增: 选项 Getter 支持 — useQuery 和 useInfiniteQuery 现在支持传递一个 getter 函数(例如,() => options)或整个选项对象的 Ref,从而实现更简单的响应性。
新增: useQueries 的 combine 选项 — 允许通过 combine 选项将多个查询结果合并为单个值(例如,单个对象或派生状态)。
新增: 注入上下文 — vue-query 组合式函数现在可以在任何支持 injectionContext 的函数(例如,路由守卫)中使用,前提是在 effectScope 内使用。来源
已弃用: isLoading — 在 v5 中重命名为 isPending。isLoading 属性现在特指 isPending && isFetching(首次获取)。来源
重大变更: Vue 3.3 要求 — @tanstack/vue-query v5 现在要求最低 Vue 版本为 3.3,以支持更新的响应性特性。来源
其他变更: 新的 v5 布尔结果 isPlaceholderData · useInfiniteQuery 需要 initialPageParam · 查询结果新增 isPaused 属性 · 通过 suspense() 方法支持 Suspense(实验性功能)
对组合式函数的参数使用 MaybeRefOrGetter,以无缝支持 ref、普通值和响应式 getter。来源
// 推荐:接受 ref、getter 或值 export function useUser(id: MaybeRefOrGetter<string>) { return useQuery({ queryKey: ['user', id], queryFn: () => fetchUser(toValue(id)) }) }
将整个选项对象作为 getter 函数传递,以便一次性响应式更新多个查询参数(v5.91.0+)。来源
// 推荐用于复杂响应性 useQuery(() => ({ queryKey: ['todo', id.value], queryFn: () => fetchTodo(id.value), enabled: !!id.value }))
对于简单的属性访问,优先使用响应式 getter 而不是 computed,以避免不必要的记忆化开销。来源
// 推荐:无需 computed const { data } = useUserProjects(() => props.userId)
// 避免:不必要的记忆化 const userId = computed(() => props.userId) const { data } = useUserProjects(userId)
将 onServerPrefetch 与 suspense() 辅助函数结合使用,以确保在 SSR 期间等待查询完成。来源
const { data, suspense } = useQuery({ queryKey: ['test'], queryFn: fetcher }) onServerPrefetch(suspense)
为 SSR 设置大于 0 的 staleTime,以防止客户端立即在后台重新获取数据。来源
const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 1000 * 60 * 5 } } })
如果服务器上的 gcTime 设置为非 Infinity 值,则在请求处理后手动调用 queryClient.clear(),以防止内存泄漏。来源
将 useQuery 的结果视为不可变的,并在将其与 v-model 等双向绑定一起使用之前克隆数据。来源
const { data } = useQuery({ ... }) const model = ref() watch(data, (newData) => { model.value = JSON.parse(JSON.stringify(newData)) }, { immediate: true })
使用 queryOptions 辅助函数来定义类型安全、可重用的查询配置,这些配置可以在组件之间共享。
const userOptions = (id: string) => queryOptions({ queryKey: ['user', id], queryFn: () => fetchUser(id) })
useQuery(userOptions('123'))
将所有响应式依赖项包含在 queryKey 中,以确保 Vue Query 跟踪它们并在更改时自动重新获取数据。来源
在同一页面上运行多个 Vue 应用程序时,使用自定义的 queryClientKey,以防止 QueryClient 实例冲突。来源
// 插件配置 app.use(VueQueryPlugin, { queryClientKey: 'AppA' })
// 使用 useQuery({ queryKey: ['data'], queryFn: fetcher, queryClientKey: 'AppA' })
每周安装量
68
代码仓库
GitHub 星标数
147
首次出现
2026年2月19日
安全审计
已安装于
github-copilot56
opencode55
codex53
gemini-cli52
amp52
kimi-cli52
@tanstack/vue-queryHooks for managing, caching and syncing asynchronous and remote data in Vue
Version: 5.95.2 Deps: @tanstack/match-sorter-utils@^8.19.4, @vue/devtools-api@^6.6.3, vue-demi@^0.14.10, @tanstack/query-core@5.95.2 Tags: alpha: 5.0.0-alpha.91, beta: 5.0.0-beta.35, rc: 5.0.0-rc.16, previous: 4.43.0, latest: 5.95.2
References: Docs — API reference, guides
This section documents version-specific API changes — prioritize recent major/minor releases.
BREAKING: useQuery signature — v5 requires a single object argument { queryKey, queryFn, ... }. Old positional arguments are no longer supported and will result in errors source
BREAKING: useQueries signature — v5 now takes an object with a queries array property: useQueries({ queries: [...] }). This allows for additional top-level options like combine
BREAKING: useQueries return type — now returns a Ref of the results array instead of a reactive array, ensuring better compatibility with Vue 2 and avoiding spread reactivity loss source
BREAKING: Callback removal — onSuccess, onError, and onSettled are removed from useQuery, useInfiniteQuery, and useQueries. Use select for data transformation or global QueryCache callbacks instead source
BREAKING: cacheTime renamed — renamed to gcTime (Garbage Collection time) across all options and default options to better reflect its purpose source
BREAKING: useInfiniteQuery parameters — getNextPageParam and getPreviousPageParam now receive a single object containing lastPage, allPages, lastPageParam, and allPageParams source
BREAKING: keepPreviousData removed — the option is replaced by the placeholderData: keepPreviousData helper function from @tanstack/vue-query source
NEW: queryOptions / infiniteQueryOptions — helper functions for sharing query definitions with type safety across components and for prefetching source
NEW: useMutationState — new composable to access mutation state globally by filtering for specific mutations based on keys or filters
NEW: Options Getter support — useQuery and useInfiniteQuery now support passing a getter function (e.g., () => options) or a Ref for the entire options object, enabling easier reactivity
NEW: combine for useQueries — allows merging multiple query results into a single value (e.g., a single object or a derived state) via the combine option
NEW: Injection Context — vue-query composables can now be used in any function that supports injectionContext (e.g., router guards) if used within an effectScope source
DEPRECATED: isLoading — renamed to isPending in v5. The isLoading property now specifically means isPending && isFetching (fetching for the first time) source
BREAKING: Vue 3.3 requirement — minimum Vue version for @tanstack/vue-query v5 is now 3.3 to support newer reactivity features source
Also changed: isPlaceholderData boolean result new v5 · initialPageParam required for useInfiniteQuery · isPaused property added to query results · Suspense (experimental) supported via suspense() method (experimental)
Use MaybeRefOrGetter for composable parameters to support refs, plain values, and reactive getters seamlessly source
// Preferred: Accepts ref, getter, or value export function useUser(id: MaybeRefOrGetter<string>) { return useQuery({ queryKey: ['user', id], queryFn: () => fetchUser(toValue(id)) }) }
Pass the entire options object as a getter function to reactively update multiple query parameters at once (v5.91.0+) source
// Preferred for complex reactivity useQuery(() => ({ queryKey: ['todo', id.value], queryFn: () => fetchTodo(id.value), enabled: !!id.value }))
Prefer reactive getters over computed for simple property access to avoid unnecessary memoization overhead source
// Preferred: No computed needed const { data } = useUserProjects(() => props.userId)
// Avoid: Unnecessary memoization const userId = computed(() => props.userId) const { data } = useUserProjects(userId)
Use onServerPrefetch with the suspense() helper to ensure queries are awaited during SSR
Weekly Installs
68
Repository
GitHub Stars
147
First Seen
Feb 19, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
github-copilot56
opencode55
codex53
gemini-cli52
amp52
kimi-cli52
Lark CLI IM 即时消息管理工具:机器人/用户身份操作聊天、消息、文件下载
41,800 周安装
遗留系统现代化改造工具:安全迁移、绞杀者模式、特性测试指南
1,000 周安装
GraphQL架构师指南:Apollo联邦、模式设计与性能优化最佳实践
1,000 周安装
Feature Forge:AI驱动的功能规格定义工具,结构化需求工作坊
1,100 周安装
agent-eval:编程智能体评估工具,自动化测试比较AI代码助手性能
1,100 周安装
抖音无水印视频下载器 - 支持文案提取和语音识别,一键保存视频和文字内容
1,100 周安装
Ghost Security Secrets Scanner - 机密信息扫描编排器,自动化检测代码中的敏感数据
1,100 周安装
const { data, suspense } = useQuery({ queryKey: ['test'], queryFn: fetcher }) onServerPrefetch(suspense)
Set staleTime to a value greater than 0 for SSR to prevent immediate background refetching on the client source
const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 1000 * 60 * 5 } } })
Manually call queryClient.clear() after request handling if gcTime is set to a non-Infinity value on the server to prevent memory leaks source
Treat useQuery results as immutable and clone data before using it with two-way bindings like v-model source
const { data } = useQuery({ ... }) const model = ref() watch(data, (newData) => { model.value = JSON.parse(JSON.stringify(newData)) }, { immediate: true })
Use the queryOptions helper to define type-safe, reusable query configurations that can be shared across components
const userOptions = (id: string) => queryOptions({ queryKey: ['user', id], queryFn: () => fetchUser(id) })
useQuery(userOptions('123'))
Include all reactive dependencies in the queryKey to ensure Vue Query tracks them and refetches automatically on change source
Utilize a custom queryClientKey when running multiple Vue applications on the same page to prevent QueryClient instance clashing source
// Plugin configuration app.use(VueQueryPlugin, { queryClientKey: 'AppA' })
// Usage useQuery({ queryKey: ['data'], queryFn: fetcher, queryClientKey: 'AppA' })