import { LitElement, html } from 'lit' import { QueryClient, QueryClientProvider, createMutationController, createQueryController, useIsFetching, useIsMutating, } from '@tanstack/lit-query' import { addTodoOnServer, failNextFetchRequest, failNextMutationRequest, fetchTodosFromServer, resetTodoApi, } from './todoApi' import type { Todo, TodosResponse } from './todoApi' resetTodoApi() const demoQueryClient = new QueryClient({ defaultOptions: { queries: { retry: false, }, mutations: { retry: false, }, }, }) class DemoQueryProvider extends QueryClientProvider { constructor() { super() this.client = demoQueryClient } protected override createRenderRoot(): HTMLElement | DocumentFragment { return this } } customElements.define('demo-query-provider', DemoQueryProvider) class TanstackLitQueryDemo extends LitElement { static properties = { nextTodoTitle: { state: true }, cacheSeedCount: { state: true }, } private nextTodoTitle = 'Add mutation assertion' private cacheSeedCount = 0 private readonly todosQuery = createQueryController( this, { queryKey: ['todos'], queryFn: fetchTodosFromServer, }, ) private readonly createTodoMutation = createMutationController< Todo, Error, string >(this, { mutationKey: ['create-todo'], mutationFn: addTodoOnServer, onSuccess: (createdTodo) => { demoQueryClient.setQueryData(['todos'], (existing) => { if (!existing) { return { items: [createdTodo], requestCount: 0, source: 'cache', } } return { items: [...existing.items, createdTodo], requestCount: existing.requestCount, source: 'cache', } }) }, }) private readonly isFetching = useIsFetching(this, { queryKey: ['todos'], }) private readonly isMutating = useIsMutating(this, { mutationKey: ['create-todo'], }) protected override createRenderRoot(): HTMLElement | DocumentFragment { return this } private onTitleInput(event: Event): void { const target = event.target as HTMLInputElement this.nextTodoTitle = target.value } private addTodo(): void { const title = this.nextTodoTitle.trim() if (!title) { return } this.createTodoMutation.mutate(title) this.nextTodoTitle = '' } private async invalidateTodos(): Promise { await demoQueryClient.invalidateQueries({ queryKey: ['todos'] }) } private seedCacheOnlyTodo(): void { this.cacheSeedCount += 1 const seedTodo: Todo = { id: 10_000 + this.cacheSeedCount, title: `Seeded cache todo ${this.cacheSeedCount}`, } demoQueryClient.setQueryData(['todos'], (existing) => { if (!existing) { return { items: [seedTodo], requestCount: 0, source: 'cache', } } return { items: [...existing.items, seedTodo], requestCount: existing.requestCount, source: 'cache', } }) } private forceNextFetchFailure(): void { failNextFetchRequest() } private forceNextMutationFailure(): void { failNextMutationRequest() } private async resetDemoState(): Promise { resetTodoApi() this.cacheSeedCount = 0 this.nextTodoTitle = 'Add mutation assertion' await demoQueryClient.resetQueries({ queryKey: ['todos'] }) this.createTodoMutation.reset() } render() { const query = this.todosQuery() const mutation = this.createTodoMutation() const todos = query.data?.items ?? [] return html`

TanStack Lit Query E2E Demo

Verifies integration between Lit, query-core, and this adapter.

query: ${query.status}

mutation: ${mutation.status}

fetches: ${this.isFetching()}

mutations: ${this.isMutating()}

server-requests: ${query.data?.requestCount ?? 0}

source: ${query.data?.source ?? 'none'}

New todo

${query.isError ? html`

${String(query.error)}

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

${String(mutation.error)}

` : null}

${todo.id}: ${todo.title}

` } } customElements.define('tanstack-lit-query-demo', TanstackLitQueryDemo) class DemoRoot extends LitElement { protected override createRenderRoot(): HTMLElement | DocumentFragment { return this } render() { return html`

` } } customElements.define('demo-root', DemoRoot)