Class TanstackLitQueryDemo

examples/lit/basic/src/main.ts:45–256

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

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