How to get product custom options list by GraphQl query?

Magento GraphQl query to fetch product custom options list using CustomizableOptionInterface.

The Customizable Option Interface contains basic information about a product’s customizable options.

You can create different types of Custom Options for the product like text field, text area, radio button, dropdown, multi-select, image, file uploading, etc…

Each different type of field of custom option uses a different Customizable Option type in the GraphQl query.

• CustomizableFieldOption is used for the text field.
• CustomizableAreaOption used for the text area field.
• CustomizableRadioOption used for the radio button.
• CustomizableFileOption is used for the file uploading field type.
• CustomizableMultipleOption is used for the multiple select options field type.
• CustomizableDropDownOption is used for the dropdown field type.
• CustomizableDateOption is used for the date field type.

Let’s create a GraphQl product query to fetch a list of custom options from the product by filtering SKU.

{
  products(filter: {sku: {eq: "100001"}}) {
    items {
      uid
      name
      sku
      __typename
      ... on CustomizableProductInterface {
        options {
          title
          required
          sort_order
          uid
          ... on CustomizableFieldOption {
            textField: value {
              sku
              price
            }
          }
          ... on CustomizableDropDownOption {
            dropDown: value {
              sku
              price
            } 
          }
        }
      }
    }
  }
}

Product Custom options will be displayed like in the given screenshot.

Here Product with Text field and DropDown fields are available and we want to retrieve a list of available custom options by GraphQl query.

You can also fetch another field type also using the query with specific customizable options.

Output:

{
  "data": {
    "products": {
      "items": [
        {
          "uid": "MjA0Nw==",
          "name": "Shree1",
          "sku": "100001",
          "__typename": "SimpleProduct",
          "options": [
            {
              "title": "Welcome Message",
              "required": true,
              "sort_order": 1,
              "uid": "Y3VzdG9tLW9wdGlvbi8x",
              "textField": {
                "sku": "100001-welcome",
                "price": 10
              }
            },
            {
              "title": "Hobby",
              "required": true,
              "sort_order": 2,
              "uid": "Y3VzdG9tLW9wdGlvbi8y",
              "dropDown": [
                {
                  "sku": null,
                  "price": 20
                },
                {
                  "sku": null,
                  "price": 10
                },
                {
                  "sku": null,
                  "price": 15
                }
              ]
            }
          ]
        }
      ]
    }
  }
}