SuperAPI AI 工具集

tanstack-query-intent-framework-use-framework-adapter-reactivity

前端与建站

查看项目

更新于 10-16 00:02

技能介绍

用途:在 React、Preact、Vue、Solid、Svelte、Angular、Lit 等 TanStack Query 适配器之间迁移或对照查询模式,确保响应式输入在各框架中保持正确传递。

主要能力与用法:

  • 通用选项可用 queryOptions 定义,如 queryOptions({ queryKey: ['todo', id], queryFn: async () => ({ id }) })。
  • Vue:响应式输入需通过 computed 包装选项对象,例如 useQuery(computed(() => ({ queryKey: ['todo', id.value], queryFn: async () => ({ id: id.value }) }))),可用 toRef 保持 props 响应式。
  • Solid:使用 createQuery(() => ({ ... })) 选项函数形式。
  • Svelte v6:使用 rune 兼容的选项函数 createQuery(() => ({ ... })),而非旧的 store 写法。
  • Angular:injectQuery(() => ({ ... })) 中 queryFn 必须返回解析数据的 Promise,RxJS Observable 需用 firstValueFrom 转换。

限制与常见错误:Vue 中直接把解包后的值写进 queryKey 而不使用 computed,会丢失响应式;Svelte v6 沿用旧 store 语法会出错;Angular 直接返回 Observable 而非 Promise 会出错。资料未提供 Lit 适配器的具体示例细节。