Method render

examples/lit/basic/src/main.ts:161–255

()

  }

  render() {
    const query = this.todosQuery()
    const mutation = this.createTodoMutation()
    const todos = query.data?.items ?? []

    return html`
      <main>
        <h1>TanStack Lit Query E2E Demo</h1>
        <p>Verifies integration between Lit, query-core, and this adapter.</p>

        <section>
          <div data-testid="query-status">query: ${query.status}</div>
          <div data-testid="mutation-status">mutation: ${mutation.status}</div>
          <div data-testid="active-fetches">fetches: ${this.isFetching()}</div>
          <div data-testid="active-mutations">
            mutations: ${this.isMutating()}
          </div>
          <div data-testid="request-count">
            server-requests: ${query.data?.requestCount ?? 0}
          </div>
          <div data-testid="data-source">
            source: ${query.data?.source ?? 'none'}
          </div>
        </section>

        <section>
          <button
            data-testid="refetch"
            @click=${() => this.todosQuery.refetch()}
          >
            Refetch
          </button>
          <button
            data-testid="invalidate"
            @click=${() => this.invalidateTodos()}
          >
            Invalidate
          </button>
          <button
            data-testid="seed-cache"
            @click=${() => this.seedCacheOnlyTodo()}
          >
            Seed Cache
          </button>
          <button
            data-testid="reset-demo-state"
            @click=${() => this.resetDemoState()}
          >
            Reset Demo State
          </button>
          <button
            data-testid="fail-next-fetch"
            @click=${() => this.forceNextFetchFailure()}
          >
            Fail Next Fetch
          </button>
          <button
            data-testid="fail-next-mutation"