createQueryController

function createQueryController<TQueryFnData, TError, TData, TQueryData, TQueryKey>(
   host,
   options,
queryClient?): QueryResultAccessor<TData, TError>;

정의 위치: packages/lit-query/src/createQueryController.ts:355

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

반환된 접근자는 호출할 수 있으며 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 반응형 컨트롤러 호스트 구독.

옵션

Accessor<CreateQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>>

쿼리 옵저버 옵션 또는 옵션을 반환하는 getter입니다.

queryClient?

QueryClient

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

반환값

QueryResultAccessor<TData, TError>

쿼리 헬퍼 메서드가 포함된 최신 쿼리 결과의 접근자입니다.

예시

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

class TodosView extends LitElement {
  private readonly todos = createQueryController(this, {
    queryKey: ['todos'],
    queryFn: async () => fetch('/api/todos').then((r) => r.json()),
  })

  render() {
    const query = this.todos()

    if (query.isPending) return html`Loading...`
    if (query.isError) return html`Error`

    return html`<ul>${query.data.map((todo) => html`<li>${todo.title}</li>`)}</ul>`
  }
}