Apollo (GraphQL) pobiera więcej niż jeden element w zapytaniu

Question

Czy mogę pobrać więcej niż jeden element w zapytaniu GraphQL? Mam wiele danych listy produktów i chcę pobrać, na przykład, trzy produkty w moim komponencie. Mam tablicę identyfikatorów potrzebnych produktów, czy mogę przekazać ją do zapytania? To jest mój kwerendy dla jednego produktu:

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

Ale nie sądzę, można po prostu umieścić go w funkcji i wykonać go na przykład trzy razy za trzy produkty.

Answer 1

To powszechne i bardzo przydatny do zaoferowania dwa rodzaje zapytań dla każdego typu masz:

1. zapytanie do pobierania pojedynczego węzła z id lub innych unikalnych pól, to w Twoim przypadku Product (już Masz to).

2. zapytanie o pobranie wielu węzłów w zależności od różnych warunków filtrowania, nazwijmy to allProducts.

Następnie masz dwie możliwości pobrania wielu produktów w jednym zapytaniu.

Po pierwsze, można użyć Product kwerendy wiele razy i używać GraphQL Aliases uniknąć nazwę starcia w danych odpowiedzi:

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

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

    fragment ProductInfo on Product { 
    name 
    price 
    } 
} 

Można zbudować ten ciąg kwerendy dynamicznie w zależności od identyfikatorów chcesz zapytać. Jednakże, jest to prawdopodobnie najlepiej użyć zapytania allProducts niezbędnej konfiguracji filtra jeśli liczba zróżnicowanych identyfikatorów jest dynamiczna:

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

fragment ProductInfo on Product { 
    name 
    price 
} 

Można go wypróbować siebie w this GraphQL Playground I przygotował dla Ciebie. Więcej informacji uzupełniających można znaleźć in this article.

Answer 2

W celu dodania identyfikatorów produktu do zapytania można zdefiniować typ input. Zobacz cheat sheet.

Więc zapytanie od klienta może wyglądać tak:

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

Na serwerze można zdefiniować schemat z typem input następująco:

input ProductIds { 
 
    ids: [ID!] 
 
} 
 

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

 
schema { 
 
    query: Query 
 
}