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

Posted 2023-03-08

【中文标题】Apollo Client Angular：如何将从查询中获得的数据作为参数传递给graphql中的另一个查询？

【英文标题】：Apollo Client Angular: how to pass the data obtained from a query as an argument in another query in graphql?

【发布时间】：2021-08-02 15:24:41

【问题描述】：

我正在使用 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 未定义（在我调试代码时发现）。有人可以帮我吗？。

【问题讨论】：

您没有提到当this.customerId 未定义时该怎么做。您是否仍希望在调用中没有 variables 属性的情况下订阅？

【参考方案1】：

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

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); 
);

【讨论】：

感谢您的帮助。

@Michael D，你能帮忙吗***.com/questions/67683493/…

@Asking：这个问题似乎与 ReactJS 更相关。我不精通 ReactJS，所以我不认为我可以帮助解决这个问题。