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

Question

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

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

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

Answer 1

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

Answer 2

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

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

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

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

reactjs

graphql

apollo