Method render

examples/lit/pagination/src/main.ts:374–566

()

  }

  render() {
    const query = this.projectsQuery()
    const projects = query.data?.projects ?? []
    const hasMore = query.data?.hasMore ?? false
    const createProject = this.createProjectMutation()
    const favoriteProject = this.favoriteMutation()

    return html`
      <main>
        <h1>TanStack Lit Query Pagination Demo</h1>
        <p>
          Pagination + mutation demo with optimistic favorite toggles,
          invalidation, and deterministic server failures.
        </p>

        <section>
          <div data-testid="query-status">query: ${query.status}</div>
          <div data-testid="is-fetching">
            isFetching: ${query.isFetching ? 'yes' : 'no'}
          </div>
          <div data-testid="is-placeholder">
            isPlaceholderData: ${query.isPlaceholderData ? 'yes' : 'no'}
          </div>
          <div data-testid="current-page">page: ${this.page}</div>
          <div data-testid="response-page">
            response-page: ${query.data?.page ?? '-'}
          </div>
          <div data-testid="has-more">has-more: ${hasMore ? 'yes' : 'no'}</div>
          <div data-testid="total-projects">
            total-projects: ${query.data?.totalProjects ?? 0}
          </div>
          <div data-testid="total-request-count">
            total-requests: ${query.data?.requestMeta.totalRequestCount ?? 0}
          </div>
          <div data-testid="page-request-count">
            page-requests: ${query.data?.requestMeta.pageRequestCount ?? 0}
          </div>
          <div data-testid="total-mutation-count">
            total-mutations: ${query.data?.requestMeta.totalMutationCount ?? 0}
          </div>
          <div data-testid="prefetch-status">
            prefetch: ${this.prefetchStatus}
          </div>
        </section>

        ${query.isError
          ? html`<p data-testid="query-error">${String(query.error)}</p>`
          : null}
        ${this.resetError
          ? html`<p data-testid="reset-error">${this.resetError}</p>`
          : null}

        <section>
          <label for="delayInput">Delay (ms)</label>
          <input
            id="delayInput"
            data-testid="delay-input"
            type="number"