import { LitElement, html } from 'lit' import { QueryClient, QueryClientProvider, createQueryController, } from '@tanstack/lit-query' import { fetchTodosFromServer, resetTodoApi } from './todoApi' import type { TodosResponse } from './todoApi' resetTodoApi() const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false }, }, }) class BasicQueryProvider extends QueryClientProvider { constructor() { super() this.client = queryClient } protected override createRenderRoot(): HTMLElement | DocumentFragment { return this } } customElements.define('basic-query-provider', BasicQueryProvider) class BasicQueryExample extends LitElement { private readonly todos = createQueryController(this, { queryKey: ['todos'], queryFn: fetchTodosFromServer, }) protected override createRenderRoot(): HTMLElement | DocumentFragment { return this } render() { const query = this.todos() return html`

Basic Query Example

Status: ${query.status}

${query.isPending ? html`

` : null} ${query.isError ? html`

Error: ${String(query.error)}

` : null}

${todo.title}

` } } customElements.define('basic-query-example', BasicQueryExample) class BasicQueryRoot extends LitElement { protected override createRenderRoot(): HTMLElement | DocumentFragment { return this } render() { return html`

` } } customElements.define('basic-query-root', BasicQueryRoot)