import { LitElement, html } from 'lit' import { QueryClient, QueryClientProvider, createMutationController, createQueryController, } from '@tanstack/lit-query' import { addTodoOnServer, fetchTodosFromServer, resetTodoApi } from './todoApi' import type { Todo, TodosResponse } from './todoApi' resetTodoApi() const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false }, }, }) class MutationExampleProvider extends QueryClientProvider { constructor() { super() this.client = queryClient } protected override createRenderRoot(): HTMLElement | DocumentFragment { return this } } customElements.define('mutation-example-provider', MutationExampleProvider) class MutationExample extends LitElement { static properties = { nextTitle: { state: true }, } private nextTitle = 'Created from mutation example' private readonly todos = createQueryController(this, { queryKey: ['todos'], queryFn: fetchTodosFromServer, }) private readonly addTodo = createMutationController( this, { mutationKey: ['create-todo'], mutationFn: addTodoOnServer, onSuccess: (created) => { queryClient.setQueryData(['todos'], (existing) => { if (!existing) { return { items: [created], requestCount: 0, source: 'cache', } } return { items: [...existing.items, created], requestCount: existing.requestCount, source: 'cache', } }) }, }, ) protected override createRenderRoot(): HTMLElement | DocumentFragment { return this } private onInput(event: Event): void { const target = event.target as HTMLInputElement this.nextTitle = target.value } private submit(): void { const title = this.nextTitle.trim() if (!title) return this.addTodo.mutate(title) this.nextTitle = '' } render() { const query = this.todos() const mutation = this.addTodo() const items = query.data?.items ?? [] return html`

Mutation Example

Query: ${query.status}

Mutation: ${mutation.status}

Todo title

${todo.title}

` } } customElements.define('mutation-example', MutationExample) class MutationExampleRoot extends LitElement { protected override createRenderRoot(): HTMLElement | DocumentFragment { return this } render() { return html`

` } } customElements.define('mutation-example-root', MutationExampleRoot)