使用Angular 2中的Apollo客户端通过异步管道获取嵌套数据

// 导入必要的依赖
import { Component } from '@angular/core';
import { Apollo } from 'apollo-angular';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// 定义GraphQL查询
const GET_NESTED_DATA = gql`
  query GetNestedData {
    nestedData {
      id
      name
      nestedField {
        id
        value
      }
    }
  }
`;

@Component({
  selector: 'app-example',
  template: `
    <div *ngIf="nestedData$ | async as nestedData">
      <h1>{{ nestedData.name }}</h1>
      <p>{{ nestedData.nestedField.value }}</p>
    </div>
  `,
})
export class ExampleComponent {
  nestedData$: Observable<any>;

  constructor(private apollo: Apollo) {}

  ngOnInit() {
    // 订阅GraphQL查询结果
    this.nestedData$ = this.apollo
      .watchQuery({ query: GET_NESTED_DATA })
      .valueChanges.pipe(
        map((result: any) => result.data.nestedData)
      );
  }
}