Question

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

在日志中，我可以看到先返回可观察对象，然后返回服务数据。

来自服务的数据-{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（）可以获取数据，接收结果，然后获取一个Observable   完成。

使用watchQuery（）可以获取数据，接收结果和   可以观察到的是为新排放而开放，因此它永远不会完成。

来自文档

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

Apollo.watchQuery也可以执行相同的操作，只是它可以发出多个   结果。（GraphQL查询本身仍然仅发送一次，但是   例如，watchQuery observable也可以更新，例如，另一个查询   导致在Apollo Client的全局缓存中更新对象。）

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

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

1 个答案: