Method render

examples/lit/ssr/src/app.ts:107–156

()

  }

  protected override render() {
    if (!this.dataQuery) {
      return html`
        <article data-testid="content">
          <h1>Lit Query SSR</h1>
          <p data-testid="status">Loading...</p>
        </article>
      `
    }

    const query = this.dataQuery()

    if (query.isPending) {
      return html`
        <article data-testid="content">
          <h1>Lit Query SSR</h1>
          <p data-testid="status">Loading...</p>
        </article>
      `
    }

    if (query.isError) {
      return html`
        <article data-testid="content">
          <h1>Lit Query SSR</h1>
          <p data-testid="status">Error</p>
          <p data-testid="error-message">${query.error?.message}</p>
        </article>
      `
    }

    return html`
      <article data-testid="content">
        <h1>Lit Query SSR</h1>
        <p data-testid="status">${query.isFetching ? 'Refreshing' : 'Ready'}</p>
        <p data-testid="message">${query.data.message}</p>
        <p data-testid="request-count">
          Request count: ${query.data.requestCount}
        </p>
        <p data-testid="served-at">Served at: ${query.data.servedAt}</p>
        <button
          data-testid="refetch-button"
          ?disabled=${query.isFetching}
          @click=${this.handleRefetch}
        >
          Refetch
        </button>
      </article>
    `
  }
}

if (!customElements.get('ssr-app')) {