Angular Resolver - 从 HTTP 调用解析数据不起作用

Question

我正在尝试解析来自 graphql apollo 客户端的 HTTP 调用的数据。数据未得到解析，使用解析器的组件无法访问数据。

在日志中，我可以看到先返回 observable，然后返回来自服务的数据。

来自服务的数据 - {name: "s raina", id: "e78903e0-5214-11e8-93f9-8951cc65e163", country: "sa", __typename: "Cricketer", Symbol(id): "Cricketer:e78903e0-5214-11e8-93f9-8951cc65e163"}

在解析器中，我没有返回 observable，而是尝试返回订阅 observable 并返回数据。在这种情况下，使用解析器的组件访问未定义的数据，之后服务获取数据。

任何帮助将不胜感激。

解析器：

import { Injectable } from '@angular/core';

import { Resolve } from '@angular/router';
import { Observable } from 'rxjs';
import { Cricketer } from './types';
import { CricketerService } from './cricketer.service';
import { ActivatedRouteSnapshot } from '@angular/router/src/router_state';
@Injectable()
export class CricketerResolver implements Resolve<any> {
  cricketer: any;
  constructor(private cricketerService: CricketerService) {

  }

  resolve(route: ActivatedRouteSnapshot) {
    console.log(this.cricketerService.getCricketer(route.paramMap.get('id')));
    return this.cricketerService.getCricketer(route.paramMap.get('id'));
  }
}

服务：

import { Injectable } from '@angular/core';
import { Apollo } from 'apollo-angular';
import gql from 'graphql-tag';
import { map , filter } from 'rxjs/operators';

import { Query , Cricketer } from './types';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class CricketerService {
  constructor(private apollo: Apollo) {}
  private searchInput: BehaviorSubject<String> = new BehaviorSubject<String>('');

  getAllCricketers(searchTerm: String) {
    return this.apollo.watchQuery<Query>({
        pollInterval: 10000,
        query: gql`
        query allCricketers($searchTerm: String){
          allCricketers(searchTerm: $searchTerm){
            name
            id
            country
            age
          }
        }
        `,
        variables: {
          searchTerm: searchTerm
        }
      })
      .valueChanges.pipe(map(result => {
        return result.data.allCricketers;
      }));
  }

  getCricketer(id: String) {
    return this.apollo
      .watchQuery<Query>({
        query: gql`
          query getCricketer($id: String!){
            getCricketer(id: $id) {
              name
              id
              country
            }
          }
      `,
        variables: {
          id: id
        }
      })
      .valueChanges.pipe(map(result => {
        console.log(result.data.getCricketer);
        return result.data.getCricketer;
      }));
  }

  addCricketer(name: String, country: String, age: Number) {
    return this.apollo.mutate({
      mutation: gql`
        mutation addCricketer(name: $name,country: $country, age: $age){
          id
          name
          country
          age
        }
      `,
      variables: {
        name: name,
        country: country,
        age: age
      }
    });
  }

  updateCricketer(id: String, name: String, country: String, age: Number) {
    return this.apollo.mutate({
      mutation: gql`
          mutation updateCricketer(id: $id , name: $name,country: $country, age: $age){
            id
            name
            country
            age
          }
        `,
      variables: {
        id: id,
        name: name,
        country: country,
        age: age
      }
    });
  }

  updateSearchTerm(searchInput: String) {
    this.searchInput.next(searchInput);
  }

  getSearchTerm() {
    return this.searchInput.asObservable();
  }
}

使用解析器的组件：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-cricketer-detail',
  templateUrl: './cricketer-detail.component.html',
  styleUrls: ['./cricketer-detail.component.css']
})
export class CricketerDetailComponent implements OnInit {
  cricketer: any;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.cricketer = this.route.snapshot.data.cricketer;
  }

}

Answer 1

通过使用查询方法而不是 watchQuery 方法解决了这个问题。 watchQuery 没有完成，因为它可以发出多个结果。所以解析器没有收到 observable 也没有解析路由。

apollo-graphql 团队的成员之一

使用 query() 获取数据，接收结果，然后是 Observable 完成。

使用 watchQuery() 获取数据、接收结果和 Observable 对新的排放保持打开状态，因此它永远不会完成。

来自文档

Apollo.query 方法返回一个发出结果的 Observable，只是 一次

Apollo.watchQuery 也做同样的事情，除了它可以发出多个 结果。 （GraphQL 查询本身仍然只发送一次，但是 watchQuery observable 也可以更新，例如，另一个查询 导致对象在 Apollo 客户端的全局缓存中更新。）

参考-https://github.com/apollographql/apollo-angular/issues/280