createQueriesController

function createQueriesController<TQueryOptions, TCombinedResult>(
   host,
   options,
queryClient?): QueriesResultAccessor<TCombinedResult>;

정의 위치: packages/lit-query/src/createQueriesController.ts:701

호스트가 여러 항목을 구독하도록 하는 Lit 반응형 컨트롤러를 생성합니다 쿼리.

반환된 접근자는 호출할 수 있으며 current 및 destroy도 노출합니다. options 또는 options.queries가 함수인 경우 host 중에 다시 읽습니다 쿼리 목록이 반응형 호스트 상태를 따를 수 있도록 업데이트합니다.

queryClient를 생략하면 컨트롤러는 다음에서 클라이언트를 확인합니다 연결된 가장 가까운 QueryClientProvider.

타입 매개변수

TQueryOptions

TQueryOptions extends any[]

TCombinedResult

TCombinedResult = CreateQueriesResults<TQueryOptions>

매개변수

host

ReactiveControllerHost

쿼리를 소유하는 Lit 반응형 컨트롤러 호스트 구독.

옵션

Accessor<CreateQueriesControllerOptions<TQueryOptions, TCombinedResult>>

쿼리 컨트롤러 옵션 또는 옵션을 반환하는 getter입니다.

queryClient?

QueryClient

선택적인 명시적 query client입니다. 다음을 위해 이를 제공하십시오 Lit 컨텍스트에서 클라이언트를 확인하면 안 되는 컨트롤러입니다.

반환값

QueriesResultAccessor<TCombinedResult>

최신 쿼리 결과 또는 다음에서 반환된 값의 접근자 combine.

예시

import { LitElement, html } from 'lit'
import { createQueriesController } from '@tanstack/lit-query'

class DashboardView extends LitElement {
  private readonly dashboard = createQueriesController(this, {
    queries: [
      { queryKey: ['stats'], queryFn: fetchStats },
      { queryKey: ['projects'], queryFn: fetchProjects },
    ],
    combine: ([stats, projects]) => ({
      stats: stats.data,
      projects: projects.data ?? [],
      isPending: stats.isPending || projects.isPending,
    }),
  })

  render() {
    const dashboard = this.dashboard()
    return html`<p>Projects: ${dashboard.projects.length}</p>`
  }
}