Class BasicQueryExample

examples/lit/basic/src/basic-query.ts:31–72

customElements.define('basic-query-provider', BasicQueryProvider)

class BasicQueryExample extends LitElement {
  private readonly todos = createQueryController<TodosResponse, Error>(this, {
    queryKey: ['todos'],
    queryFn: fetchTodosFromServer,
  })

  protected override createRenderRoot(): HTMLElement | DocumentFragment {
    return this
  }

  render() {
    const query = this.todos()
    return html`
      <main>
        <h1>Basic Query Example</h1>
        <p data-testid="basic-query-status">
          Status: <strong>${query.status}</strong>
        </p>
        <button
          data-testid="basic-refetch"
          @click=${() => this.todos.refetch()}
        >
          Refetch
        </button>

        ${query.isPending
          ? html`<p data-testid="basic-loading">Loading...</p>`
          : null}
        ${query.isError
          ? html`<p data-testid="basic-error">Error: ${String(query.error)}</p>`
          : null}

        <ul data-testid="basic-todo-list">
          ${(query.data?.items ?? []).map(
            (todo) =>
              html`<li data-testid="basic-todo-item">${todo.title}</li>`,
          )}
        </ul>
      </main>
    `
  }
}

customElements.define('basic-query-example', BasicQueryExample)