译零 TransZero · TanStack Query 中文文档
主站

createQueriesController

更新于 2026-11-02 Lit 查看英文原文 ↗
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?

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}

本页为 TanStack Query 文档(Lit 版)的非官方中文翻译,原文由上游团队维护,遵循 MIT 许可。 译文如有偏差,以英文原文为准。

译自上游 59d11de