설치

중요: Lit 어댑터는 현재 실험 단계이며 v0.1. API가 초기 단계인 동안 릴리스 안정성이 더 필요하다면 정확한 버전을 고정하세요.

Lit 및 TanStack Query Core와 함께 Lit Query를 설치합니다:

npm i @tanstack/lit-query @tanstack/query-core lit

pnpm add @tanstack/lit-query @tanstack/query-core lit

yarn add @tanstack/lit-query @tanstack/query-core lit

bun add @tanstack/lit-query @tanstack/query-core lit

@tanstack/query-core는 @tanstack/lit-query의 피어 종속성입니다. Lit 문서에서는 사용자 대상 API를 @tanstack/lit-query에서 가져오지만, 앱에서는 @tanstack/query-core를 명시적으로 설치해야 합니다.

요구 사항

Lit Query는 Lit 3을 포함하여 Lit 2.8 이상을 대상으로 합니다. Lit 반응형 컨트롤러와 Lit 컨텍스트를 사용하므로 쿼리 소비자는 LitElement 같은 ReactiveControllerHost 인스턴스여야 합니다.

TanStack Query는 최신 브라우저에 최적화되어 있습니다:

Chrome >= 91
Firefox >= 90
Edge >= 91
Safari >= 15
iOS >= 15
Opera >= 77

Provider 설정

QueryClient를 생성하고, 여기에 QueryClientProvider를 제공한 다음, 사용자 정의 요소를 등록합니다. 패키지는 provider 클래스를 내보내지만 사용자를 대신해 customElements.define을 호출하지는 않습니다.

서브클래스 패턴

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)

<app-query-provider>
  <todos-view></todos-view>
</app-query-provider>

직접 제공자 요소

provider 클래스를 직접 등록하고 Lit 템플릿에서 해당 client 속성을 바인딩할 수 있습니다. 점은 중요합니다. .client=${queryClient}는 HTML attribute가 아니라 property binding입니다.

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

const queryClient = new QueryClient()

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

class AppRoot extends LitElement {
  render() {
    return html`
      <query-client-provider .client=${queryClient}>
        <todos-view></todos-view>
      </query-client-provider>
    `
  }
}

연결된 provider에 client가 없으면 오류를 발생시킵니다. 전체 계약은 생성된 QueryClientProvider 참조를 확인하세요.

렌더링 루트

이 문서의 코드 조각은 Lit의 기본 shadow DOM을 사용합니다. Lit Query controller와 QueryClientProvider는 전역 selector가 아닌 host lifecycle과 Lit context를 사용하므로 shadow DOM 및 light DOM과 함께 작동합니다.

일부 실행 가능한 예시는 공유 페이지 스타일과 테스트 selector를 위해 데모 마크업이 light DOM에 유지되도록 createRenderRoot()를 재정의하고 this를 반환합니다. Lit Query에는 이 재정의가 필요하지 않습니다. 앱에서 컴포넌트의 내부 마크업을 전역 CSS, 테스트 또는 non-shadow-DOM 통합 코드에 노출해야 할 별도의 이유가 있을 때만 light DOM을 사용합니다.

DevTools 상태

Lit Devtools는 아직 사용할 수 없습니다. 이는 현재 adapter의 제한 사항이며 설치 단계가 아닙니다.

요구 사항​

Provider 설정​

서브클래스 패턴​

직접 제공자 요소​

렌더링 루트​

DevTools 상태​