如何使用apollo客户端库在angular中创建带参数的graphql查询

npm install apollo-angular apollo-angular-link-http apollo-client graphql

query GetUserData($userId: ID!) {
  user(id: $userId) {
    id
    name
    email
  }
}

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

@Injectable({
  providedIn: 'root'
})
export class ApolloService {
  constructor(private apollo: Apollo) {}

  getUserData(userId: string): Observable<any> {
    return this.apollo
      .watchQuery<any>({
        query: gql`
          query GetUserData($userId: ID!) {
            user(id: $userId) {
              id
              name
              email
            }
          }
        `,
        variables: {
          userId: userId
        }
      })
      .valueChanges.pipe(map(result => result.data.user));
  }
}

import { Component, OnInit } from '@angular/core';
import { ApolloService } from 'path/to/apollo.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  userData: any;

  constructor(private apolloService: ApolloService) {}

  ngOnInit(): void {
    this.apolloService.getUserData('123').subscribe(data => {
      this.userData = data;
    });
  }
}

<div *ngIf="userData">
  <h2>{{ userData.name }}</h2>
  <p>{{ userData.email }}</p>
</div>