reactjs - Apollo (GraphQL) 在查询中获取多个元素

Question

我可以在 GraphQL 查询中获取多个元素吗？我有许多产品列表数据，例如，我想获取组件中的三个产品。我有一系列需要的产品ID，我可以将其传递给查询吗？这是我对一种产品的查询:

query ProductInCartQuery($id: ID!){
  Product(id: $id) { 
   id
   name
   price
 }
}

但我不认为我可以将它放在一个函数中并执行它，例如针对三个产品执行三次。

Answer 1

为您拥有的每种类型提供两种查询是常见且非常有用的:

1. 用于获取具有 id 或其他唯一字段的单个节点的查询，在您的案例中是 Product(您已经拥有了这个)。

2. 根据不同的过滤条件获取多个节点的查询，我们将其称为allProducts。

然后您有两种选择可以在一个查询中获取多个产品。

首先，您可以多次使用 Product 查询并使用 GraphQL Aliases以避免响应数据中的名称冲突:

query ProductInCartQuery($firstId: ID!, $secondId: ID!){
  firstProduct: Product(id: $firstId) { 
    id
    ... ProductInfo
  }

  secondProduct: Product(id: $secondId) { 
    id
    ... ProductInfo
  }

  fragment ProductInfo on Product {
    name
    price
  }
} 

您可以根据要查询的 ID 动态构建此查询字符串。但是，如果不同 id 的数量是动态的，最好将 allProducts 查询与必要的过滤器设置一起使用:

query filteredProducts($ids: [ID!]!) {
  allProducts(filter: {
    id_in: $ids
  }) {
    ... ProductInfo
  }
}

fragment ProductInfo on Product {
  name
  price
}

您可以在 this GraphQL Playground 中亲自尝试一下我为你准备好了。更多背景信息可查看in this article .