概述
重要：
@tanstack/lit-query包目前处于实验阶段，版本为 v0.1。Lit 适配器的 API 和文档将持续演进。若你在早期阶段将其用于生产环境，请将该包锁定到特定补丁版本，并有计划地升级。
@tanstack/lit-query 包是 TanStack Query 的 Lit 适配器。它为 Lit 应用提供响应式控制器（reactive controller）API，用于拉取、缓存、同步和更新服务端状态（server state）。
TanStack Query 管理服务端状态：即由远程系统拥有、通过异步方式拉取、在多个界面间共享、且可能随时被他人修改的数据。它处理缓存、请求去重（deduplication）、过期数据（stale data）、后台重新拉取（background refetching）、修改（mutations）、失效处理（invalidation）、分页（pagination）以及垃圾回收（garbage collection）。
Lit Query 通过 Lit 响应式控制器 暴露这些功能。Lit 响应式控制器挂载到 ReactiveControllerHost 上，通常是一个 LitElement。Lit Query 控制器订阅 QueryClient，在结果变更时请求宿主（host）更新，并随宿主生命周期自动清理。
核心 API
大多数 Lit 应用使用以下 API：
QueryClientProvider通过 Lit 上下文（context）提供QueryClientcreateQueryController用于查询（queries）createQueriesController用于动态并行查询（dynamic parallel queries）createMutationController用于修改（mutations）createInfiniteQueryController用于无限查询（infinite queries）useIsFetching、useIsMutating和useMutationState用于缓存状态指示器（cache state indicators）
该适配器还从 @tanstack/lit-query 重新导出 TanStack Query Core API，因此 Lit 文档中的示例均以 @tanstack/lit-query 作为面向用户的导入路径。
首个查询
1import { LitElement, html } from 'lit'2import {3 QueryClient,4 QueryClientProvider,5 createQueryController,6} from '@tanstack/lit-query'7 8const queryClient = new QueryClient()9 10class AppQueryProvider extends QueryClientProvider {11 constructor() {12 super()13 this.client = queryClient14 }15}16 17customElements.define('app-query-provider', AppQueryProvider)18 19class RepoStats extends LitElement {20 private readonly repo = createQueryController(this, {21 queryKey: ['repoData'],22 queryFn: async () => {23 const response = await fetch(24 'https://api.github.com/repos/TanStack/query',25 )26 if (!response.ok) throw new Error('Failed to fetch repo data')27 return response.json() as Promise<{28 name: string29 description: string30 stargazers_count: number31 }>32 },33 })34 35 render() {36 const query = this.repo()37 38 if (query.isPending) return html`Loading...`39 if (query.isError) return html`Error: ${query.error.message}`40 41 return html`42 <h1>${query.data.name}</h1>43 <p>${query.data.description}</p>44 <strong>${query.data.stargazers_count} stars</strong>45 `46 }47}48 49customElements.define('repo-stats', RepoStats)在查询消费者（query consumers）上方渲染上述提供器（provider）：
1<app-query-provider>2 <repo-stats></repo-stats>3</app-query-provider>状态说明
Lit 开发者工具（Devtools）尚不可用。请在适配器成熟过程中，借助缓存 API 和自动生成的 API 参考文档进行开发。
请先阅读 安装，再进入 快速开始；若你来自 React Query，则可参考 响应式控制器 vs Hook 指南。