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

Question

我正在尝试从此查询中获取数据：

const onInitQuery = gql`
query {
   library {
       files {
          name
          libraryPath
          id
          thumbFullPath
       }
      folders {
         id
         name
      }
   }
}

我正在按照 here 提供的示例进行操作，但我不知道如何形成 *ngFor 循环。在示例中，他 select 通过 select 管道进行嵌套查询的第一层，但我需要嵌套在第二层中的文件夹属性。

我的 *ngFor 看起来如何才能实现这一目标？自动取款机看起来像这样，但这不起作用：

  <div class="test" *ngFor="let folder of data | async | select: 'library.folders'">{{folder.name}}</div>

我的组件如下所示：

@Component({
  selector: 'cv-library',
  templateUrl: './library.component.html',
  styleUrls: ['./library.component.css']
})
export class LibraryComponent implements OnInit, AfterViewInit {

  public data: ApolloQueryObservable<any>;
  public folders: any;
  public files: any;

  constructor(private apollo: Apollo) { }

  ngOnInit() {
    this.data = this.apollo.watchQuery({
      query: onInitQuery
    });
  }
}

Answer 1

apollo-angular SelectPipe 暂不支持获取嵌套值。但是你可以自己实现这个管道。这是我的解决方案：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'select'
})
export class SelectPipe implements PipeTransform {
  transform(obj: any, name: string = '') {
    if (name && obj && obj.data) {
      return name.split('.').reduce((prev, curr) => {
        return prev ? prev[curr] : undefined;
      }, obj.data);
    }
  }
}

你可以这样使用它：

  <div>
    <p>followers: </p>
    <ul *ngFor="let follower of data | async | select: 'user.followers.nodes'">
      <li>{{follower.name || follower.login}}</li>
    </ul>
  </div>

获取data.user.followers.nodes值。

Answer 2

我想说最好的做法是通过不发明轮子来完成模板之外的每个转换，并公开一个 returns 正是您的模板需要的 Observable。

<div>
  <p>followers: </p>
  <ul *ngFor="let follower of followers | async">
    <li>{{follower.name || follower.login}}</li>
  </ul>
</div>

在组件class中：

ngOnInit() {
    this.data = this.apollo.watchQuery({
      query: onInitQuery
    })
    .valueChanges
    .pipe(
      map(result => ...)
    );
  }

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

Get nested data through Async pipe with Apollo client in Angular 2

angular

graphql

apollo