译零 TransZero · TanStack Query 中文文档
主站

QueryClientProvider

更新于 2026-11-02 Lit 查看英文原文 ↗

定义于:packages/lit-query/src/QueryClientProvider.ts:62

一个 Lit 组件,通过 Lit 上下文向其子级 Lit Query 控制器提供 QueryClient。

client 是一个属性而非特性(attribute)。在 Lit 模板中渲染该组件时,需使用属性绑定方式:.client=${queryClient}。若该组件在未设置 client 的情况下连接,或已连接的 provider 被清除了 client,将抛出错误。

该类不会由包自动注册为自定义元素。应用必须通过 customElements.define 显式注册该类本身或其子类。

示例

TypeScript
1import { html, LitElement } from 'lit'2import { QueryClient, QueryClientProvider } from '@tanstack/lit-query'3 4const queryClient = new QueryClient()5 6class AppQueryProvider extends QueryClientProvider {7  constructor() {8    super()9    this.client = queryClient10  }11}12 13customElements.define('app-query-provider', AppQueryProvider)14 15class AppRoot extends LitElement {16  render() {17    return html`<app-query-provider><todos-view></todos-view></app-query-provider>`18  }19}
TypeScript
1import { html } from 'lit'2import { QueryClient, QueryClientProvider } from '@tanstack/lit-query'3 4const queryClient = new QueryClient()5 6customElements.define('query-client-provider', QueryClientProvider)7 8const view = html`9  <query-client-provider .client=${queryClient}>10    <todos-view></todos-view>11  </query-client-provider>12`

继承自

  • LitElement

构造函数

构造函数

TypeScript
1new QueryClientProvider(): QueryClientProvider;

定义于:packages/lit-query/src/QueryClientProvider.ts:80

返回值

QueryClientProvider

重写自

TypeScript
1LitElement.constructor

属性

client

TypeScript
1client: QueryClient;

定义于:packages/lit-query/src/QueryClientProvider.ts:74

当该 provider 处于连接状态时,向其子级控制器及全局回退辅助函数提供的 QueryClient。

在 Lit 模板中需以属性方式绑定:.client=${queryClient}。

本页为 TanStack Query 文档(Lit 版)的非官方中文翻译,原文由上游团队维护,遵循 MIT 许可。 译文如有偏差,以英文原文为准。

译自上游 59d11de