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

Apollo (GraphQL) fetch more than one element in a query

我可以在一个 GraphQL 查询中获取多个元素吗?我有很多产品列表数据,我想获取组件中的三个产品。我有一组所需的产品 ID,我可以将其传递给查询吗?这是我对一种产品的查询:

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

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

要将产品 ID 添加到查询中,您可以定义 input 类型。见 cheat sheet.

因此客户端上的查询可能如下所示:

query ProductsInCartQuery($productIds: ProductIds!) {
  Products(productIds: $productIds) {
    id
    name
    price
  }
}

在服务器上,您使用 input 类型定义架构,如下所示:

input ProductIds {
  ids: [ID!]
}

type Query {
  Products(productIds: ProductIds!) {
    id
    name
    price
  }
}

schema {
  query: Query
}

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

  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 I prepared for you. More background information can be found in this article 中自行尝试。