@tanstack/lit-query

点亮适配器 @tanstack/query-core 使用Lit反应控制器。

这个包目前是实验性的，是v0.1。Pin准确的版本，如果你使用 它在生产中，而API是早期的。

安装

npm install @tanstack/lit-query

对于此存储库中的本地开发：

pnpm install
pnpm --dir packages/lit-query run build

快速入门

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

const client = new QueryClient({
  defaultOptions: { queries: { retry: false } },
})

class AppProvider extends QueryClientProvider {
  constructor() {
    super()
    this.client = client
  }
}
customElements.define('app-provider', AppProvider)

class UsersView extends LitElement {
  private readonly users = createQueryController(this, {
    queryKey: ['users'],
    queryFn: async () => {
      const response = await fetch('/api/users')
      return response.json() as Promise<Array<{ id: string; name: string }>>
    },
  })

  render() {
    const query = this.users()
    if (query.isPending) return html`Loading...`
    if (query.isError) return html`Error`
    return html`<ul>
      ${query.data?.map((u) => html`<li>${u.name}</li>`)}
    </ul>`
  }
}
customElements.define('users-view', UsersView)

API表面

• QueryClientProvider， useQueryClient， resolveQueryClient
• createQueryController
• createMutationController
• createInfiniteQueryController
• createQueriesController
• useIsFetching， useIsMutating， useMutationState
• queryOptions， infiniteQueryOptions， mutationOptions

可运行的例子

这个repo在顶层包含了可运行的示例 examples/lit 目录，以便它们可以在文档中出现：

• examples/lit/basic： Vite lite应用程序涵盖查询和突变原语。
• examples/lit/pagination：分页、预取、乐观更新和错误恢复。
• examples/lit/ssr：点燃SSR渲染、脱水和水合流动。

从repo的根目录运行一个例子：

pnpm --dir examples/lit/basic run dev
pnpm --dir examples/lit/pagination run dev
pnpm --dir examples/lit/ssr run dev

开放:

• http://127.0.0.1:4173/ (基本)
• http://127.0.0.1:4183/ （分页示例应用程序）
• http://127.0.0.1:4174/ （SSR示例应用）

使用不同的端口（可选）：

DEMO_PORT=4180 pnpm --dir examples/lit/basic run dev
PAGINATION_DEMO_PORT=4181 PAGINATION_API_PORT=4182 pnpm --dir examples/lit/pagination run dev
SSR_PORT=4180 pnpm --dir examples/lit/ssr run dev
SSR_HOST=0.0.0.0 pnpm --dir examples/lit/ssr run dev

集成烟

对于在CI中使用的框架构建烟雾：

pnpm --dir integrations/lit/vite run build

质量检验关

从存储库根目录：

pnpm --dir packages/lit-query run test:types
pnpm --dir packages/lit-query run test:lib
pnpm --dir packages/lit-query run build
pnpm --dir packages/lit-query run test:build

许可证

麻省理工学院