List product sizes using graphql

[w3nda]

So I was searching like crazy how you can list the product sizes, fetch all of them so you can show them in a filter panel for example and filter products accordingly.

I couldn't find any documentation for it, nor any example for it so I'm gonna leave this here if anyone ever needs this.

Turns out it's a metaobject, so you can just use the metaobject query to get it.

query Sizes {
  metaobjects(type: "shopify--size", first: 200) {
     nodes {
      field(key: "label") {
        value
      }
    }   
  }
}

[scottdixon]

👋 Hey @w3nda

Could Filters work for your scenario?

{
  collection(handle: "winter") {
    products(first:200) {
      filters {
          id
          label
          type
          values {
            id
            label
            count
            input
          }
        }
      }
  }
}

On the demo store, this returns:

{
  "data": {
    "collection": {
      "products": {
        "filters": [
          {
            "id": "filter.v.availability",
            "label": "Availability",
            "type": "LIST",
            "values": [
              {
                "id": "filter.v.availability.1",
                "label": "In stock",
                "count": 12,
                "input": "{\"available\":true}"
              },
              {
                "id": "filter.v.availability.0",
                "label": "Out of stock",
                "count": 8,
                "input": "{\"available\":false}"
              }
            ]
          },
          {
            "id": "filter.v.price",
            "label": "Price",
            "type": "PRICE_RANGE",
            "values": [
              ...
            ]
          },
          {
            "id": "filter.p.product_type",
            "label": "Product type",
            "type": "LIST",
            "values": [
              ...
            ]
          },
          {
            "id": "filter.p.vendor",
            "label": "Brand",
            "type": "LIST",
            "values": [
             ...
            ]
          },
          {
            "id": "filter.v.option.binding mount",
            "label": "Binding mount",
            "type": "LIST",
            "values": [
              ...
            ]
          },
          {
            "id": "filter.v.option.color",
            "label": "Color",
            "type": "LIST",
            "values": [
              ...
            ]
          },
          {
            "id": "filter.v.option.material",
            "label": "Material",
            "type": "LIST",
            "values": [
              ...
            ]
          },
          {
            "id": "filter.v.option.size",
            "label": "Size",
            "type": "LIST",
            "values": [
              {
                "id": "filter.v.option.size.154cm",
                "label": "154cm",
                "count": 13,
                "input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"154cm\"}}"
              },
              ...
            ]
          }
        ]
      }
    }
  }
}

More info + tutorial here: https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/products-collections/filter-products