createQueryController
TypeScript
1function createQueryController<TQueryFnData = unknown, TError = Error, TData = TQueryFnData, TQueryData = TQueryFnData, TQueryKey extends readonly unknown[] = readonly unknown[]>(2 host: ReactiveControllerHost,3 options: Accessor<CreateQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>>,4 queryClient?: QueryClient5): QueryResultAccessor<TData, TError>;定义于：packages/lit-query/src/createQueryController.ts:348
创建一个 Lit 响应式控制器，使宿主组件订阅单个查询。
返回的访问器（accessor）既可调用，又暴露 current、refetch、suspense 和 destroy 方法。当 options 是一个函数时，它会在宿主更新期间被重新读取，从而使查询键和选项能够响应宿主的响应式状态。
如果省略 queryClient，该控制器将从最近连接的 QueryClientProvider 中解析查询客户端。
类型参数
TQueryFnData
TQueryFnData = unknown
TError
TError = Error
TData
TData = TQueryFnData
TQueryData
TQueryData = TQueryFnData
TQueryKey
TQueryKey extends readonly unknown[] = readonly unknown[]
参数
host
ReactiveControllerHost
拥有该查询订阅的 Lit 响应式控制器宿主。
options
Accessor<CreateQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>>
查询观察者选项，或一个返回选项的 getter 函数。
options 的属性
基于 QueryObserverOptions 构建。参见上方类型定义以了解其影响。
queryClient?
可选的显式查询客户端。为不应从 Lit 上下文中解析客户端的控制器提供此参数。
返回值
QueryResultAccessor<TData, TError>
一个用于获取最新查询结果的访问器，并附带查询辅助方法。
示例
TypeScript
1import { LitElement, html } from 'lit'2import { createQueryController } from '@tanstack/lit-query'3 4class TodosView extends LitElement {5 private readonly todos = createQueryController(this, {6 queryKey: ['todos'],7 queryFn: async () => fetch('/api/todos').then((r) => r.json()),8 })9 10 render() {11 const query = this.todos()12 13 if (query.isPending) return html`Loading...`14 if (query.isError) return html`Error`15 16 return html`<ul>${query.data.map((todo) => html`<li>${todo.title}</li>`)}</ul>`17 }18}