Class MutationExample

examples/lit/basic/src/mutation.ts:33–121

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<TodosResponse, Error>(this, {
    queryKey: ['todos'],
    queryFn: fetchTodosFromServer,
  })

  private readonly addTodo = createMutationController<Todo, Error, string>(
    this,
    {
      mutationKey: ['create-todo'],
      mutationFn: addTodoOnServer,
      onSuccess: (created) => {
        queryClient.setQueryData<TodosResponse>(['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 ?? []