Apollo Client Angular：如何将从查询中获取的数据作为参数传递给 graphql 中的另一个查询？

Question

我正在使用 apollo clinet angular 从使用 graphql 的第三方获取数据。我想使用从 graphql 查询中获得的一些数据用于另一个 graphql 查询。例如


const customer = gql`query customer{
    customer {
      id
    }
....
....

this.apollo.watchQuery({
   query: customer
}).valueChanges.subscribe((customer: any) => {
 this.customerId = customer.data?.customer.id;
});

我想在另一个查询中使用 this.customerId 作为参数，如下所示：

const customerInformation = gql` 
query customerInformation($customer: Long!){
customerInformation{
  first_name
  last_name
  address
}
}`;
....
....
if(this.customerId){
this.apollo.watchQuery({
 query: customerInformation,
 variables: {
  customer: this.customerId
},
})
 .valueChanges.subscribe((result: any) => {
  console.log(result);
 });
}

但是我没有从第二个查询中获取数据，因为代码块没有被执行，因为 this.customerId 是未定义的（当我调试代码时发现）。有人可以帮我吗？

Answer 1

变量this.customerId被异步初始化。第二次调用必须与第一次调用相结合。这取决于您希望如何执行它们。一种最快的方法是使用高阶映射运算符（如 switchMap.

从一个可观察对象映射到另一个可观察对象

import { NEVER } from 'rxjs';
import { switchMap } from 'rxjs/operators';

const customer = gql`query ...`;

this.apollo.watchQuery({ query: customer }).valueChanges.pipe(
  switchMap((customer: any) => {   // <-- map to other observable
    this.customerId = customer;
    const customerInformation = gql` query ...`;
    if (!!customer) {
      return this.apollo.watchQuery({
        query: customerInformation,
        variables: {
          customer: this.customerId
        },
      }).valueChanges;
    }
    return NEVER;  // <-- do NOT emit if `customer` is undefined
).subscribe(
  (value: any) => { console.log(result); },
  (error: any) => { console.log(error); }
);

Apollo Client Angular：如何将从查询中获取的数据作为参数传递给 graphql 中的另一个查询？

Apollo Client Angular: how to pass the data obtained from a query as an argument in another query in graphql?

apollo

graphql

angular