How can I query the colors that are already selected in the product in graphql?

[ViniciusGG]

How can I check the colors that are already selected in the product?

For my query I am using getProduct followed by
productByHandle

My query:

Reuslt:

Color Admin:

[mageplaza-cs]

Hi @ViniciusGG

I am from Mageplaza - Shopify solution expert.

With your current query, you aren’t fetching the selected colors for each variant yet because:

• You’re only fetching variants { node { id, title, price, availableForSale } }.
• You haven’t included the selectedOptions field inside each variant.

You need to update your query by adding selectedOptions inside node, like this:

variants(first: 5) {
  edges {
    node {
      id
      title
      price {
        amount
        currencyCode
      }
      availableForSale
      selectedOptions {
        name
        value
      }
    }
  }
}

Specifically, you need to:

1. Add selectedOptions { name value } inside each variant.
2. After that, filter for the options where name === “Color”.

Example of the response after adding selectedOptions:

{
  "data": {
    "productByHandle": {
      "variants": {
        "edges": [
          {
            "node": {
              "id": "...",
              "title": "Red Shirt",
              "selectedOptions": [
                { "name": "Color", "value": "Red" },
                { "name": "Size", "value": "M" }
              ]
            }
          },
          {
            "node": {
              "id": "...",
              "title": "Blue Shirt",
              "selectedOptions": [
                { "name": "Color", "value": "Blue" },
                { "name": "Size", "value": "L" }
              ]
            }
          }
        ]
      }
    }
  }
}

=> This way, you can easily tell that the product has the colors Red and Blue.

Please let me know if it works as expected!

Best regards!