Magento 2 How to get configurable products in GraphQL

Magento has very advanced features, and one of them is a configurable product type. Today we will explain to you how to get configurable products. Attributes that are specific to configurable products can be used when performing a product query. Swatches allow the shopper to view the color, texture, or other visual aspects of a configurable product. Magento displays these options as color, graphic, or text swatches.

The following data types implement SwatchDataInterface:

  1. ColorSwatchData
  2. ImageSwatchData
  3. TextSwatchData

Add the following inline fragment to the output section of your products query to return information specific to configurable products:

Copy
... on ConfigurableProduct {
  configurable_options {
   (attributes)
  }
}

The following products query returns ConfigurableProduct information.

Request

Copy
{
  products(filter: { sku: { eq: "WH01" } }) {
    items {
      id
      attribute_set_id
      name
      sku
      __typename
      price_range{
        minimum_price{
          regular_price{
            value
            currency
          }
        }
      }
      categories {
        id
      }
      ... on ConfigurableProduct {
        configurable_options {
          id
          attribute_id
          label
          position
          use_default
          attribute_code
          values {
            value_index
            label
            swatch_data{
              value
            }
          }
          product_id
        }
        variants {
          product {
            id
            name
            sku
            attribute_set_id
            ... on PhysicalProductInterface {
              weight
            }
            price_range{
              minimum_price{
                regular_price{
                  value
                  currency
                }
              }
            }
          }
          attributes {
            label
            code
            value_index
          }
        }
      }
    }
  }
}

Response

Copy
{
  "data": {
    "products": {
      "items": [
        {
          "id": 1050,
          "attribute_set_id": 9,
          "name": "Mona Pullover Hoodlie",
          "sku": "WH01",
          "__typename": "ConfigurableProduct",
          "price_range": {
            "minimum_price": {
              "regular_price": {
                "value": 57,
                "currency": "USD"
              }
            }
          },
          "categories": [
            {
              "id": 8
            },
            {
              "id": 21
            },
            {
              "id": 24
            },
            {
              "id": 34
            }
          ],
          "configurable_options": [
            {
              "id": 147,
              "attribute_id": "93",
              "label": "Color",
              "position": 1,
              "use_default": false,
              "attribute_code": "color",
              "values": [
                {
                  "value_index": 5480,
                  "label": "Green",
                  "swatch_data": {
                    "value": "#53a828"
                  }
                },
                {
                  "value_index": 5483,
                  "label": "Orange",
                  "swatch_data": {
                    "value": "#eb6703"
                  }
                },
                {
                  "value_index": 5484,
                  "label": "Purple",
                  "swatch_data": {
                    "value": "#ef3dff"
                  }
                }
              ],
              "product_id": 1050
            },
            {
              "id": 146,
              "attribute_id": "144",
              "label": "Size",
              "position": 0,
              "use_default": false,
              "attribute_code": "size",
              "values": [
                {
                  "value_index": 5593,
                  "label": "XS",
                  "swatch_data": {
                    "value": "XS"
                  }
                },
                {
                  "value_index": 5594,
                  "label": "S",
                  "swatch_data": {
                    "value": "S"
                  }
                },
                {
                  "value_index": 5595,
                  "label": "M",
                  "swatch_data": {
                    "value": "M"
                  }
                },
                {
                  "value_index": 5596,
                  "label": "L",
                  "swatch_data": {
                    "value": "L"
                  }
                },
                {
                  "value_index": 5597,
                  "label": "XL",
                  "swatch_data": {
                    "value": "XL"
                  }
                }
              ],
              "product_id": 1050
            }
          ],
          "variants": [
            {
              "product": {
                "id": 1035,
                "name": "Mona Pullover Hoodlie-XS-Green",
                "sku": "WH01-XS-Green",
                "attribute_set_id": 9,
                "weight": 1,
                "price_range": {
                  "minimum_price": {
                    "regular_price": {
                      "value": 57,
                      "currency": "USD"
                    }
                  }
                }
              },
              "attributes": [
                {
                  "label": "Green",
                  "code": "color",
                  "value_index": 5480
                },
                {
                  "label": "XS",
                  "code": "size",
                  "value_index": 5593
                }
              ]
            },
            {
              "product": {
                "id": 1036,
                "name": "Mona Pullover Hoodlie-XS-Orange",
                "sku": "WH01-XS-Orange",
                "attribute_set_id": 9,
                "weight": 1,
                "price_range": {
                  "minimum_price": {
                    "regular_price": {
                      "value": 57,
                      "currency": "USD"
                    }
                  }
                }
              },
              "attributes": [
                {
                  "label": "Orange",
                  "code": "color",
                  "value_index": 5483
                },
                {
                  "label": "XS",
                  "code": "size",
                  "value_index": 5593
                }
              ]
            },
            {
              "product": {
                "id": 1037,
                "name": "Mona Pullover Hoodlie-XS-Purple",
                "sku": "WH01-XS-Purple",
                "attribute_set_id": 9,
                "weight": 1,
                "price_range": {
                  "minimum_price": {
                    "regular_price": {
                      "value": 57,
                      "currency": "USD"
                    }
                  }
                }
              },
              "attributes": [
                {
                  "label": "Purple",
                  "code": "color",
                  "value_index": 5484
                },
                {
                  "label": "XS",
                  "code": "size",
                  "value_index": 5593
                }
              ]
            },
            {
              "product": {
                "id": 1038,
                "name": "Mona Pullover Hoodlie-S-Green",
                "sku": "WH01-S-Green",
                "attribute_set_id": 9,
                "weight": 1,
                "price_range": {
                  "minimum_price": {
                    "regular_price": {
                      "value": 57,
                      "currency": "USD"
                    }
                  }
                }
              },
              "attributes": [
                {
                  "label": "Green",
                  "code": "color",
                  "value_index": 5480
                },
                {
                  "label": "S",
                  "code": "size",
                  "value_index": 5594
                }
              ]
            },
            {
              "product": {
                "id": 1039,
                "name": "Mona Pullover Hoodlie-S-Orange",
                "sku": "WH01-S-Orange",
                "attribute_set_id": 9,
                "weight": 1,
                "price_range": {
                  "minimum_price": {
                    "regular_price": {
                      "value": 57,
                      "currency": "USD"
                    }
                  }
                }
              },
              "attributes": [
                {
                  "label": "Orange",
                  "code": "color",
                  "value_index": 5483
                },
                {
                  "label": "S",
                  "code": "size",
                  "value_index": 5594
                }
              ]
            },
            {
              "product": {
                "id": 1040,
                "name": "Mona Pullover Hoodlie-S-Purple",
                "sku": "WH01-S-Purple",
                "attribute_set_id": 9,
                "weight": 1,
                "price_range": {
                  "minimum_price": {
                    "regular_price": {
                      "value": 57,
                      "currency": "USD"
                    }
                  }
                }
              },
              "attributes": [
                {
                  "label": "Purple",
                  "code": "color",
                  "value_index": 5484
                },
                {
                  "label": "S",
                  "code": "size",
                  "value_index": 5594
                }
              ]
            },
            {
              "product": {
                "id": 1041,
                "name": "Mona Pullover Hoodlie-M-Green",
                "sku": "WH01-M-Green",
                "attribute_set_id": 9,
                "weight": 1,
                "price_range": {
                  "minimum_price": {
                    "regular_price": {
                      "value": 57,
                      "currency": "USD"
                    }
                  }
                }
              },
              "attributes": [
                {
                  "label": "Green",
                  "code": "color",
                  "value_index": 5480
                },
                {
                  "label": "M",
                  "code": "size",
                  "value_index": 5595
                }
              ]
            },
            {
              "product": {
                "id": 1042,
                "name": "Mona Pullover Hoodlie-M-Orange",
                "sku": "WH01-M-Orange",
                "attribute_set_id": 9,
                "weight": 1,
                "price_range": {
                  "minimum_price": {
                    "regular_price": {
                      "value": 57,
                      "currency": "USD"
                    }
                  }
                }
              },
              "attributes": [
                {
                  "label": "Orange",
                  "code": "color",
                  "value_index": 5483
                },
                {
                  "label": "M",
                  "code": "size",
                  "value_index": 5595
                }
              ]
            },
            {
              "product": {
                "id": 1043,
                "name": "Mona Pullover Hoodlie-M-Purple",
                "sku": "WH01-M-Purple",
                "attribute_set_id": 9,
                "weight": 1,
                "price_range": {
                  "minimum_price": {
                    "regular_price": {
                      "value": 57,
                      "currency": "USD"
                    }
                  }
                }
              },
              "attributes": [
                {
                  "label": "Purple",
                  "code": "color",
                  "value_index": 5484
                },
                {
                  "label": "M",
                  "code": "size",
                  "value_index": 5595
                }
              ]
            },
            {
              "product": {
                "id": 1044,
                "name": "Mona Pullover Hoodlie-L-Green",
                "sku": "WH01-L-Green",
                "attribute_set_id": 9,
                "weight": 1,
                "price_range": {
                  "minimum_price": {
                    "regular_price": {
                      "value": 57,
                      "currency": "USD"
                    }
                  }
                }
              },
              "attributes": [
                {
                  "label": "Green",
                  "code": "color",
                  "value_index": 5480
                },
                {
                  "label": "L",
                  "code": "size",
                  "value_index": 5596
                }
              ]
            },
            {
              "product": {
                "id": 1045,
                "name": "Mona Pullover Hoodlie-L-Orange",
                "sku": "WH01-L-Orange",
                "attribute_set_id": 9,
                "weight": 1,
                "price_range": {
                  "minimum_price": {
                    "regular_price": {
                      "value": 57,
                      "currency": "USD"
                    }
                  }
                }
              },
              "attributes": [
                {
                  "label": "Orange",
                  "code": "color",
                  "value_index": 5483
                },
                {
                  "label": "L",
                  "code": "size",
                  "value_index": 5596
                }
              ]
            },
            {
              "product": {
                "id": 1046,
                "name": "Mona Pullover Hoodlie-L-Purple",
                "sku": "WH01-L-Purple",
                "attribute_set_id": 9,
                "weight": 1,
                "price_range": {
                  "minimum_price": {
                    "regular_price": {
                      "value": 57,
                      "currency": "USD"
                    }
                  }
                }
              },
              "attributes": [
                {
                  "label": "Purple",
                  "code": "color",
                  "value_index": 5484
                },
                {
                  "label": "L",
                  "code": "size",
                  "value_index": 5596
                }
              ]
            },
            {
              "product": {
                "id": 1047,
                "name": "Mona Pullover Hoodlie-XL-Green",
                "sku": "WH01-XL-Green",
                "attribute_set_id": 9,
                "weight": 1,
                "price_range": {
                  "minimum_price": {
                    "regular_price": {
                      "value": 57,
                      "currency": "USD"
                    }
                  }
                }
              },
              "attributes": [
                {
                  "label": "Green",
                  "code": "color",
                  "value_index": 5480
                },
                {
                  "label": "XL",
                  "code": "size",
                  "value_index": 5597
                }
              ]
            },
            {
              "product": {
                "id": 1048,
                "name": "Mona Pullover Hoodlie-XL-Orange",
                "sku": "WH01-XL-Orange",
                "attribute_set_id": 9,
                "weight": 1,
                "price_range": {
                  "minimum_price": {
                    "regular_price": {
                      "value": 57,
                      "currency": "USD"
                    }
                  }
                }
              },
              "attributes": [
                {
                  "label": "Orange",
                  "code": "color",
                  "value_index": 5483
                },
                {
                  "label": "XL",
                  "code": "size",
                  "value_index": 5597
                }
              ]
            },
            {
              "product": {
                "id": 1049,
                "name": "Mona Pullover Hoodlie-XL-Purple",
                "sku": "WH01-XL-Purple",
                "attribute_set_id": 9,
                "weight": 1,
                "price_range": {
                  "minimum_price": {
                    "regular_price": {
                      "value": 57,
                      "currency": "USD"
                    }
                  }
                }
              },
              "attributes": [
                {
                  "label": "Purple",
                  "code": "color",
                  "value_index": 5484
                },
                {
                  "label": "XL",
                  "code": "size",
                  "value_index": 5597
                }
              ]
            }
          ]
        }
      ]
    }
  }
}

That's it!!

If you are looking for more GraphQL solutions then check out our another article which is List of GraphQL Queries and Mutations for Magento 2.

I hope this article helps you to find what you were looking for.

Bookmark it for your future reference. Do comment below if you have any other questions on that.

P.S. Do share this article with your team.




Search
Recent Posts
    Tags
    Newsletter
    SocialFollow on Twitter
    Visit now!