개요

중요: @tanstack/lit-query 패키지는 현재 실험적이며 v0.1. Lit 어댑터 API와 문서는 계속 발전할 것으로 예상합니다. 초기 단계에서 프로덕션에 사용한다면 패키지를 패치 버전으로 고정하고 신중하게 업그레이드하세요.

@tanstack/lit-query 패키지는 TanStack Query용 Lit adapter입니다. 이 패키지는 Lit 애플리케이션에 서버 상태를 가져오고, 캐시하고, 동기화하고, 업데이트하기 위한 reactive controller API를 제공합니다.

TanStack Query는 서버 상태, 즉 원격 시스템이 소유하고 비동기적으로 가져오며 여러 화면에서 공유되고 언제든 다른 누군가가 변경할 수 있는 데이터를 관리합니다. 캐싱, 요청 중복 제거, stale 데이터, 백그라운드 다시 가져오기, 뮤테이션, 무효화, 페이지네이션 및 가비지 컬렉션을 처리합니다.

Lit Query는 Lit 반응형 컨트롤러를 통해 이러한 기능을 제공합니다. Lit 반응형 컨트롤러는 일반적으로 LitElement인 ReactiveControllerHost에 연결됩니다. Lit Query 컨트롤러는 QueryClient를 구독하고, 결과가 변경되면 호스트 업데이트를 요청하며, 호스트 수명 주기에 따라 정리됩니다.

핵심 API

대부분의 Lit 애플리케이션은 다음 API를 사용합니다:

Lit context를 통해 QueryClient를 제공하는 QueryClientProvider입니다.
쿼리를 위한 createQueryController
동적 병렬 쿼리를 위한 createQueriesController
뮤테이션을 위한 createMutationController
무한 쿼리용 createInfiniteQueryController
캐시 상태 표시기에는 useIsFetching, useIsMutating 및 useMutationState를 사용합니다

어댑터는 @tanstack/lit-query의 TanStack Query Core API도 다시 내보내므로 Lit 문서의 예제에서는 @tanstack/lit-query를 사용자 대상 import 경로로 사용합니다.

첫 번째 쿼리

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

const queryClient = new QueryClient()

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

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

class RepoStats extends LitElement {
  private readonly repo = createQueryController(this, {
    queryKey: ['repoData'],
    queryFn: async () => {
      const response = await fetch(
        'https://api.github.com/repos/TanStack/query',
      )
      if (!response.ok) throw new Error('Failed to fetch repo data')
      return response.json() as Promise<{
        name: string
        description: string
        stargazers_count: number
      }>
    },
  })

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

    if (query.isPending) return html`Loading...`
    if (query.isError) return html`Error: ${query.error.message}`

    return html`
      <h1>${query.data.name}</h1>
      <p>${query.data.description}</p>
      <strong>${query.data.stargazers_count} stars</strong>
    `
  }
}

customElements.define('repo-stats', RepoStats)

쿼리 소비자 상위에 provider를 렌더링합니다:

<app-query-provider>
  <repo-stats></repo-stats>
</app-query-provider>

상태 참고 사항

Lit Devtools는 아직 사용할 수 없습니다. 어댑터가 성숙하는 동안 캐시 API와 생성된 API 레퍼런스를 사용하세요.

설치부터 시작한 다음 빠른 시작을 진행하고, React Query에서 전환하는 경우 Reactive Controllers와 훅 비교 가이드를 사용하세요.

핵심 API​

첫 번째 쿼리​

상태 참고 사항​

핵심 API

첫 번째 쿼리

상태 참고 사항