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

【问题标题】：Apollo (GraphQL) fetch more than one element in a queryApollo (GraphQL) 在查询中获取多个元素
【发布时间】：2017-11-10 03:45:09
【问题描述】：

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

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

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

【问题讨论】：

请编辑您的帖子以包含您的架构代码。
当然可以...
怎么样？我在编辑中添加了我的查询。

标签： reactjs graphql apollo

【解决方案1】：

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

获取具有id 或其他唯一字段的单个节点的查询，在您的情况下为Product（您已经拥有此）。
根据不同的过滤条件获取多个节点的查询，我们称之为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。

【讨论】：

谢谢！过滤器参数正是我需要的;)

【解决方案2】：

要将产品 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
}

【讨论】：