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

Ala*_*jko 8 apollo reactjs graphql

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

query ProductInCartQuery($id: ID!){
  Product(id: $id) { 
   id
   name
   price
 }
}
Run Code Online (Sandbox Code Playgroud)

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

mar*_*ani 8

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

  1. 用于获取具有一个id或其他唯一字段的单个节点的查询,在您的情况下Product(您已经拥有此字段).

  2. 根据不同的过滤条件获取许多节点的查询,让我们调用它allProducts.

然后,您有两个选项可以在一个查询中获取多个产品.

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

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

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

  fragment ProductInfo on Product {
    name
    price
  }
} 
Run Code Online (Sandbox Code Playgroud)

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

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

fragment ProductInfo on Product {
  name
  price
}
Run Code Online (Sandbox Code Playgroud)

您可以在我为您准备的GraphQL Playground中亲自尝试一下.可以在本文中找到更多背景信息.