Apollo（GraphQL）がクエリで複数の要素を取得する

Question

GraphQLクエリで複数の要素を取得できますか？私は多くの製品リストデータを持っており、例えば、私のコンポーネントに3つの製品を取りたいと思っています。私は必要な製品IDの配列を持っています。クエリに渡すことはできますか？これは、1つの製品のための私のクエリです：

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

しかし、私はちょうど機能でそれを入れて、3つの製品のために例えば3回、それを実行することができるとは思いません。

Answer 1

それはあなたが持っているすべてのタイプのクエリの2種類を提供するのが一般的と非常に便利です：idまたは他のユニークなフィールドを持つ単一ノードをフェッチする

1. クエリ、それはあなたのケースでProductだ（もしすでにこれを持っています）。

2. 異なるフィルタ条件に応じて多くのノードをフェッチするクエリは、allProductsと呼ばせてください。

次に、複数の製品を1つのクエリでフェッチする2つのオプションがあります。

まず、あなたが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です。

Answer 2

クエリに製品IDを追加する場合は、inputタイプを定義できます。 cheat sheetを参照してください。

だから、クライアント上のクエリは次のようになります。

input ProductIds { 
 
    ids: [ID!] 
 
} 
 

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

 
schema { 
 
    query: Query 
 
}

を次のようにあなたが inputタイプのスキーマを定義するサーバーで

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