@rxdi reactive component with Graphql

gistfile1.ts

import { Component, html, css, async, property } from '@rxdi/lit-html';
import { BaseComponent } from '../../shared/base.component';
import { RouteParams, Router } from '@rxdi/router';
import { map, catchError, tap } from 'rxjs/operators';
import { projectSharedCss } from '../list/style.css';
import { of } from 'rxjs';
import { IProjectType } from '../../@introspection';
import { isDevelopment } from '../../environment';

@Component({
  selector: 'project-details-component',
  style: css`
    ${projectSharedCss}
    .container {
      width: 1000px;
    }
    .resp-container {
      position: relative;
      overflow: hidden;
      padding-top: 56.25%;
      margin-top: 30px;
    }
    .resp-iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
  `,
  template(this: DetailsComponent) {
    return html`
      <div class="view container">
        <div
          style="margin-bottom: 10px;"
          @click=${() => this.router.go('/projects')}
        >
          Back
        </div>
        <card-component>
          <div slot="content" style="padding: 20px;">
            ${async(this.getProject())}
          </div>
        </card-component>
        ${this.showIframe
          ? html`
              <card-component>
                <div slot="content">
                  <div class="resp-container">
                    <iframe
                      class="resp-iframe"
                      src="http://${isDevelopment() ? 'localhost' : '139.162.156.233'}:${this.project.environment.vsCodePort}/"
                      gesture="media"
                      allow="encrypted-media"
                      allowfullscreen
                    ></iframe>
                  </div>
                </div>
              </card-component>
            `
          : ''}
      </div>
    `;
  }
})
export class DetailsComponent extends BaseComponent {
  @RouteParams() params: { projectName: string };
  @Router() private router: Router;
  @property() showIframe: boolean;
  project: IProjectType;
  getProject() {
    return this.query({
      query: 'get-project.query.graphql',
      variables: {
        name: this.params.projectName
      }
    }).pipe(
      map(res => res.data.getProject),
      tap((project) => this.project = project),
      map(
        res => html`
          <project-item-component
            createdAt=${res.createdAt}
            id=${res.id}
            name=${res.name}
            ownedBy=${res.ownedBy}
          ></project-item-component>
        `
      ),
      tap(() => this.showIframe = true),
      catchError(e => {
        this.router.go('/projects');
        return of(true);
      })
    );
  }
}