Angular Resolver - не работает разрешение данных из HTTP-вызова

Question

Я пытаюсь разрешить данные из HTTP-звонка из клиента graphql apollo. Данные не разрешаются, и компонент, использующий преобразователь, не может получить доступ к данным.

В журналах я вижу, что сначала возвращается наблюдаемое, а затем возвращаются данные из службы.

Данные из сервиса - {name: "s raina", id: "e78903e0-5214-11e8-93f9-8951cc65e163", country: "sa", __typename: "Cricketer", Symbol(id): "Cricketer:e78903e0-5214-11e8-93f9-8951cc65e163"}

В распознавателе вместо того, чтобы возвращать наблюдаемое, я пытался вернуть подписку на наблюдаемое и вернуть данные. В этом случае компонент, использующий распознаватель, получает доступ к неопределенным данным, после чего служба получает данные.

Любая помощь будет оценена.

Резольвер:

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 не завершается, поскольку может выдавать несколько результатов. Таким образом, распознаватель не получил наблюдаемое и не разрешил маршрут.

Один из членов команды apollo-graphql

С помощью query () вы получаете данные, получаете результат, а затем наблюдаемый завершается.

С помощью watchQuery () вы получаете данные, получаете результат и Наблюдаемое является открытым для новых выбросов, поэтому оно никогда не завершится.

Из документов

Метод Apollo.query возвращает Observable, который выдает результат, просто один раз

Apollo.watchQuery также делает то же самое, за исключением того, что он может излучать несколько Результаты. (Сам запрос GraphQL по-прежнему отправляется только один раз, но Наблюдаемый watchQuery также может обновляться, если, например, другой запрос вызывает обновление объекта в глобальном кэше клиента Apollo.)

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