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:
- ColorSwatchData
- ImageSwatchData
- TextSwatchData
Add the following inline fragment to the output section of your products query to return information specific to configurable products:
saveCopyzoom_out_map
... on ConfigurableProduct {
configurable_options {
(attributes)
}
}
The following products query returns ConfigurableProduct information.
Request
saveCopyzoom_out_map
{
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
saveCopyzoom_out_map
{
"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.