Eine entsprechende Abfrage kann beispielsweise so aussehen:

{
  products(
    filter: {
      sku: {
        eq: "CONFIGURABLE-SKU"
      }
    }
  ) {
    items {
      sku
      name

      ... on ConfigurableProduct {
        configurable_options {
          attribute_code
          label
          values {
            uid
            label
          }
        }

        variants {
          product {
            sku
            name
            stock_status
          }
        }
      }
    }
  }
}

Der Ausdruck … on ConfigurableProduct ist ein sogenanntes Inline Fragment. Die normale Products Abfrage kann unterschiedliche Produkttypen zurückgeben. Über das Fragment werden deshalb zusätzlich die Felder abgefragt, die nur bei einem konfigurierbaren Produkt vorhanden sind.

Über configurable_options liefert Magento die verwendeten konfigurierbaren Attribute und deren mögliche Werte. Unter variants stehen anschließend die zugeordneten einfachen Produkte inklusive SKU und Lagerstatus zur Verfügung.

Eine Antwort kann dann z.B. so aussehen:

{
  "data": {
    "products": {
      "items": [
        {
          "sku": "SHIRT",
          "name": "T-Shirt",
          "configurable_options": [
            {
              "attribute_code": "color",
              "label": "Farbe",
              "values": [
                {
                  "uid": "Y29uZmlndXJhYmxlLzEwLzUy",
                  "label": "Schwarz"
                },
                {
                  "uid": "Y29uZmlndXJhYmxlLzEwLzUz",
                  "label": "Weiß"
                }
              ]
            }
          ],
          "variants": [
            {
              "product": {
                "sku": "SHIRT-BLACK",
                "name": "T-Shirt Schwarz",
                "stock_status": "IN_STOCK"
              }
            },
            {
              "product": {
                "sku": "SHIRT-WHITE",
                "name": "T-Shirt Weiß",
                "stock_status": "OUT_OF_STOCK"
              }
            }
          ]
        }
      ]
    }
  }
}

Die Daten können anschließend im Frontend direkt weiterverarbeitet werden. Sollen beispielsweise nur lieferbare Varianten berücksichtigt werden, lässt sich die Antwort entsprechend filtern:

const product = response.data.products.items[0];

const availableVariants = product.variants
    .filter(variant => variant.product.stock_status === 'IN_STOCK')
    .map(variant => ({
        sku: variant.product.sku,
        name: variant.product.name
    }));

console.log(availableVariants);

Das Ergebnis enthält in diesem Beispiel nur noch das verfügbare Child Produkt:

[
  {
    "sku": "SHIRT-BLACK",
    "name": "T-Shirt Schwarz"
  }
]

Damit liefert Magento über eine einzige GraphQL Abfrage nicht nur das konfigurierbare Produkt selbst, sondern auch die Struktur seiner Optionen und die dazugehörigen Varianten. Gerade bei eigenen Frontends lässt sich daraus direkt die Auswahl der verfügbaren Produktvarianten aufbauen.