빠른 시작

이 코드 조각은 Lit Query의 세 가지 핵심 개념을 보여 줍니다:

• 쿼리
• 뮤테이션
• 쿼리 무효화

실행 가능한 전체 예제는 기본, 페이지네이션 및 SSR을 참조하세요.

import { LitElement, html } from 'lit'
import {
  QueryClient,
  QueryClientProvider,
  createMutationController,
  createQueryController,
} from '@tanstack/lit-query'
import { addTodo, getTodos } from './api'

const queryClient = new QueryClient()

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

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

class TodosView extends LitElement {
  private readonly todos = createQueryController(this, {
    queryKey: ['todos'],
    queryFn: getTodos,
  })

  private readonly createTodo = createMutationController(this, {
    mutationFn: addTodo,
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ['todos'] })
    },
  })

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

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

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

      <button
        ?disabled=${mutation.isPending}
        @click=${() => this.createTodo.mutate({ title: 'Write Lit docs' })}
      >
        Add Todo
      </button>
    `
  }
}

customElements.define('todos-view', TodosView)

컴포넌트를 감싸도록 provider를 마운트합니다:

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

LitElement는 ReactiveControllerHost이므로 컨트롤러는 this로 생성됩니다. Lit Query는 호스트 수명 주기를 사용하여 구독하고, 업데이트를 요청하며, 요소의 연결이 끊어질 때 정리합니다.

React Query를 알고 있다면 Reactive Controllers와 훅 비교를 계속 읽고, 그렇지 않으면 쿼리로 바로 이동합니다.