createQueriesController
TypeScript
1function createQueriesController<TQueryOptions extends any[], TCombinedResult = CreateQueriesResults<TQueryOptions>>(2 host: ReactiveControllerHost,3 options: Accessor<CreateQueriesControllerOptions<TQueryOptions, TCombinedResult>>,4 queryClient?: QueryClient5): QueriesResultAccessor<TCombinedResult>;定义于:packages/lit-query/src/createQueriesController.ts:711
创建一个 Lit 响应式控制器,使宿主组件订阅多个查询。
返回的访问器(accessor)既可调用,也暴露 current 和 destroy。当 options 或 options.queries 是函数时,它会在宿主更新期间被重新读取,从而使查询列表能够响应宿主的响应式状态。
如果省略 queryClient,该控制器将从最近连接的 QueryClientProvider 中解析查询客户端。
类型参数
TQueryOptions
TQueryOptions extends any[]
TCombinedResult
TCombinedResult = CreateQueriesResults<TQueryOptions>
参数
host
ReactiveControllerHost
拥有该查询订阅的 Lit 响应式控制器宿主。
options
Accessor<CreateQueriesControllerOptions<TQueryOptions, TCombinedResult>>
查询控制器选项,或一个返回选项的 getter 函数。
options 属性
由 CreateQueriesControllerOptions 构建。请参阅上方类型定义以了解其影响。
queryClient?
可选的显式查询客户端。对于不应从 Lit 上下文中解析客户端的控制器,请提供此参数。
返回值
QueriesResultAccessor<TCombinedResult>
用于获取最新查询结果的访问器,或 combine 返回的值。
示例
TypeScript
1import { LitElement, html } from 'lit'2import { createQueriesController } from '@tanstack/lit-query'3 4class DashboardView extends LitElement {5 private readonly dashboard = createQueriesController(this, {6 queries: [7 { queryKey: ['stats'], queryFn: fetchStats },8 { queryKey: ['projects'], queryFn: fetchProjects },9 ],10 combine: ([stats, projects]) => ({11 stats: stats.data,12 projects: projects.data ?? [],13 isPending: stats.isPending || projects.isPending,14 }),15 })16 17 render() {18 const dashboard = this.dashboard()19 return html`<p>Projects: ${dashboard.projects.length}</p>`20 }21}