QueryClientProvider

정의 위치: packages/lit-query/src/QueryClientProvider.ts:64

하위 Lit Query에 QueryClient를 제공하는 Lit element Lit 컨텍스트를 통한 컨트롤러입니다.

client는 속성(attribute)이 아니라 프로퍼티입니다. 이 요소를 다음에서 렌더링할 때 Lit 템플릿에서는 속성 바인딩으로 바인딩합니다: .client=${queryClient}. provider는 client 없이 연결하거나 이미 연결된 provider의 client가 지워집니다.

이 클래스는 패키지에 의해 사용자 지정 요소로 등록되지 않습니다. 애플리케이션은 다음에 하위 클래스 또는 클래스 자체를 등록해야 합니다 customElements.define.

예시

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

const queryClient = new QueryClient()

class AppQueryProvider extends QueryClientProvider {
  constructor() {
    super()
    this.client = queryClient
  }
}

customElements.define('app-query-provider', AppQueryProvider)

class AppRoot extends LitElement {
  render() {
    return html`<app-query-provider><todos-view></todos-view></app-query-provider>`
  }
}

import { html } from 'lit'
import { QueryClient, QueryClientProvider } from '@tanstack/lit-query'

const queryClient = new QueryClient()

customElements.define('query-client-provider', QueryClientProvider)

const view = html`
  <query-client-provider .client=${queryClient}>
    <todos-view></todos-view>
  </query-client-provider>
`

확장

• LitElement

생성자

생성자

new QueryClientProvider(): QueryClientProvider;

정의 위치: packages/lit-query/src/QueryClientProvider.ts:82

반환값

QueryClientProvider

재정의

LitElement.constructor

속성

클라이언트

client: QueryClient;

정의 위치: packages/lit-query/src/QueryClientProvider.ts:76

하위 컨트롤러와 전역 폴백에 제공되는 QueryClient 이 provider가 연결되어 있는 동안의 헬퍼입니다.

Lit 템플릿에서 .client=${queryClient}를 사용하여 이를 속성으로 바인딩합니다.