Magento 2 How to get Layered Navigation Data in GraphQL

This topic is very important for Layered Navigation in magento 2 using GraphQL. First of all we need to products query after then need to filter product collection with custom attributes and default attributes. We will show you how to get layered navigation data.

Here, in below query we will show you for all attribute code with particular category id. And will get all products attribute data with options label and value.

The following query returns information about filter category_id 14.

Request

Copy
{
  products(filter: { category_id: { eq: "14" } }) {
    total_count
    aggregations{
      attribute_code
      label
      count
      options{
        count
        label
        value
      }
    }
  }
}

Response

Copy
{
  "data": {
    "products": {
      "total_count": 11,
      "aggregations": [
        {
          "attribute_code": "price",
          "label": "Price",
          "count": 5,
          "options": [
            {
              "count": 4,
              "label": "40-50",
              "value": "40_50"
            },
            {
              "count": 2,
              "label": "50-60",
              "value": "50_60"
            },
            {
              "count": 3,
              "label": "60-70",
              "value": "60_70"
            },
            {
              "count": 1,
              "label": "70-80",
              "value": "70_80"
            },
            {
              "count": 1,
              "label": "90-*",
              "value": "90_*"
            }
          ]
        },
        {
          "attribute_code": "category_id",
          "label": "Category",
          "count": 3,
          "options": [
            {
              "count": 11,
              "label": "Tops",
              "value": "12"
            },
            {
              "count": 11,
              "label": "Jackets",
              "value": "14"
            },
            {
              "count": 2,
              "label": "Eco Friendly",
              "value": "36"
            }
          ]
        },
        {
          "attribute_code": "color",
          "label": "Color",
          "count": 9,
          "options": [
            {
              "count": 6,
              "label": "Black",
              "value": "5476"
            },
            {
              "count": 5,
              "label": "Blue",
              "value": "5477"
            },
            {
              "count": 1,
              "label": "Gray",
              "value": "5479"
            },
            {
              "count": 5,
              "label": "Green",
              "value": "5480"
            },
            {
              "count": 4,
              "label": "Orange",
              "value": "5483"
            },
            {
              "count": 2,
              "label": "Purple",
              "value": "5484"
            },
            {
              "count": 6,
              "label": "Red",
              "value": "5485"
            },
            {
              "count": 1,
              "label": "White",
              "value": "5486"
            },
            {
              "count": 3,
              "label": "Yellow",
              "value": "5487"
            }
          ]
        },
        {
          "attribute_code": "material",
          "label": "Material",
          "count": 10,
          "options": [
            {
              "count": 1,
              "label": "Cotton",
              "value": "5460"
            },
            {
              "count": 5,
              "label": "Nylon",
              "value": "5464"
            },
            {
              "count": 9,
              "label": "Polyester",
              "value": "5465"
            },
            {
              "count": 2,
              "label": "Cocona® performance fabric",
              "value": "5569"
            },
            {
              "count": 5,
              "label": "Fleece",
              "value": "5571"
            },
            {
              "count": 1,
              "label": "Hemp",
              "value": "5572"
            },
            {
              "count": 2,
              "label": "LumaTech™",
              "value": "5574"
            },
            {
              "count": 1,
              "label": "Lycra®",
              "value": "5575"
            },
            {
              "count": 1,
              "label": "Spandex",
              "value": "5577"
            },
            {
              "count": 1,
              "label": "Wool",
              "value": "5585"
            }
          ]
        },
        {
          "attribute_code": "size",
          "label": "Size",
          "count": 5,
          "options": [
            {
              "count": 11,
              "label": "XS",
              "value": "5593"
            },
            {
              "count": 11,
              "label": "S",
              "value": "5594"
            },
            {
              "count": 11,
              "label": "M",
              "value": "5595"
            },
            {
              "count": 11,
              "label": "L",
              "value": "5596"
            },
            {
              "count": 11,
              "label": "XL",
              "value": "5597"
            }
          ]
        },
        {
          "attribute_code": "eco_collection",
          "label": "Eco Collection",
          "count": 2,
          "options": [
            {
              "count": 9,
              "label": "0",
              "value": "0"
            },
            {
              "count": 2,
              "label": "1",
              "value": "1"
            }
          ]
        },
        {
          "attribute_code": "performance_fabric",
          "label": "Performance Fabric",
          "count": 2,
          "options": [
            {
              "count": 8,
              "label": "0",
              "value": "0"
            },
            {
              "count": 3,
              "label": "1",
              "value": "1"
            }
          ]
        },
        {
          "attribute_code": "erin_recommends",
          "label": "Erin Recommends",
          "count": 2,
          "options": [
            {
              "count": 9,
              "label": "0",
              "value": "0"
            },
            {
              "count": 2,
              "label": "1",
              "value": "1"
            }
          ]
        },
        {
          "attribute_code": "new",
          "label": "New",
          "count": 2,
          "options": [
            {
              "count": 9,
              "label": "0",
              "value": "0"
            },
            {
              "count": 2,
              "label": "1",
              "value": "1"
            }
          ]
        },
        {
          "attribute_code": "sale",
          "label": "Sale",
          "count": 2,
          "options": [
            {
              "count": 9,
              "label": "0",
              "value": "0"
            },
            {
              "count": 2,
              "label": "1",
              "value": "1"
            }
          ]
        },
        {
          "attribute_code": "style_general",
          "label": "Style General",
          "count": 12,
          "options": [
            {
              "count": 5,
              "label": "Insulated",
              "value": "5543"
            },
            {
              "count": 1,
              "label": "Jacket",
              "value": "5544"
            },
            {
              "count": 6,
              "label": "Lightweight",
              "value": "5546"
            },
            {
              "count": 3,
              "label": "Hooded",
              "value": "5547"
            },
            {
              "count": 2,
              "label": "Heavy Duty",
              "value": "5548"
            },
            {
              "count": 5,
              "label": "Rain Coat",
              "value": "5549"
            },
            {
              "count": 5,
              "label": "Hard Shell",
              "value": "5550"
            },
            {
              "count": 5,
              "label": "Soft Shell",
              "value": "5551"
            },
            {
              "count": 6,
              "label": "Windbreaker",
              "value": "5552"
            },
            {
              "count": 7,
              "label": "¼ zip",
              "value": "5554"
            },
            {
              "count": 5,
              "label": "Full Zip",
              "value": "5555"
            },
            {
              "count": 1,
              "label": "Reversible",
              "value": "5556"
            }
          ]
        },
        {
          "attribute_code": "pattern",
          "label": "Pattern",
          "count": 1,
          "options": [
            {
              "count": 11,
              "label": "Solid",
              "value": "5623"
            }
          ]
        },
        {
          "attribute_code": "climate",
          "label": "Climate",
          "count": 10,
          "options": [
            {
              "count": 5,
              "label": "All-Weather",
              "value": "5628"
            },
            {
              "count": 2,
              "label": "Cold",
              "value": "5629"
            },
            {
              "count": 9,
              "label": "Cool",
              "value": "5630"
            },
            {
              "count": 2,
              "label": "Indoor",
              "value": "5631"
            },
            {
              "count": 4,
              "label": "Mild",
              "value": "5632"
            },
            {
              "count": 5,
              "label": "Rainy",
              "value": "5633"
            },
            {
              "count": 10,
              "label": "Spring",
              "value": "5634"
            },
            {
              "count": 1,
              "label": "Warm",
              "value": "5635"
            },
            {
              "count": 9,
              "label": "Windy",
              "value": "5636"
            },
            {
              "count": 3,
              "label": "Wintry",
              "value": "5637"
            }
          ]
        }
      ]
    }
  }
}

Now, we will show you in next query how to filter multiple attribute with category id. As per our above discussion first need to products query.

In below products query used category id as a string, color as a string and price as a range (from-to) in filter. You can use array instead of string if you need.

Request

Copy
{
  products(filter: { category_id: { in: "12" }, color: { eq: "5480" }, price: {from: "40" to: "59"} }) {
    total_count
    aggregations {
      count
      attribute_code
      label
      options {
        label
        value
      }
    }
    items {
      id
      sku
      name
    }
  }
}

Response

Copy
{
  "data": {
    "products": {
      "total_count": 5,
      "aggregations": [
        {
          "count": 2,
          "attribute_code": "price",
          "label": "Price",
          "options": [
            {
              "label": "40-50",
              "value": "40_50"
            },
            {
              "label": "50-*",
              "value": "50_*"
            }
          ]
        },
        {
          "count": 4,
          "attribute_code": "category_id",
          "label": "Category",
          "options": [
            {
              "label": "Tops",
              "value": "12"
            },
            {
              "label": "Jackets",
              "value": "14"
            },
            {
              "label": "Hoodies & Sweatshirts",
              "value": "15"
            },
            {
              "label": "Eco Friendly",
              "value": "36"
            }
          ]
        },
        {
          "count": 8,
          "attribute_code": "color",
          "label": "Color",
          "options": [
            {
              "label": "Black",
              "value": "5476"
            },
            {
              "label": "Blue",
              "value": "5477"
            },
            {
              "label": "Gray",
              "value": "5479"
            },
            {
              "label": "Green",
              "value": "5480"
            },
            {
              "label": "Orange",
              "value": "5483"
            },
            {
              "label": "Purple",
              "value": "5484"
            },
            {
              "label": "Red",
              "value": "5485"
            },
            {
              "label": "White",
              "value": "5486"
            }
          ]
        },
        {
          "count": 6,
          "attribute_code": "material",
          "label": "Material",
          "options": [
            {
              "label": "Nylon",
              "value": "5464"
            },
            {
              "label": "Polyester",
              "value": "5465"
            },
            {
              "label": "Fleece",
              "value": "5571"
            },
            {
              "label": "Hemp",
              "value": "5572"
            },
            {
              "label": "LumaTech™",
              "value": "5574"
            },
            {
              "label": "Wool",
              "value": "5585"
            }
          ]
        },
        {
          "count": 5,
          "attribute_code": "size",
          "label": "Size",
          "options": [
            {
              "label": "XS",
              "value": "5593"
            },
            {
              "label": "S",
              "value": "5594"
            },
            {
              "label": "M",
              "value": "5595"
            },
            {
              "label": "L",
              "value": "5596"
            },
            {
              "label": "XL",
              "value": "5597"
            }
          ]
        },
        {
          "count": 2,
          "attribute_code": "eco_collection",
          "label": "Eco Collection",
          "options": [
            {
              "label": "0",
              "value": "0"
            },
            {
              "label": "1",
              "value": "1"
            }
          ]
        },
        {
          "count": 2,
          "attribute_code": "performance_fabric",
          "label": "Performance Fabric",
          "options": [
            {
              "label": "0",
              "value": "0"
            },
            {
              "label": "1",
              "value": "1"
            }
          ]
        },
        {
          "count": 2,
          "attribute_code": "erin_recommends",
          "label": "Erin Recommends",
          "options": [
            {
              "label": "0",
              "value": "0"
            },
            {
              "label": "1",
              "value": "1"
            }
          ]
        },
        {
          "count": 2,
          "attribute_code": "new",
          "label": "New",
          "options": [
            {
              "label": "0",
              "value": "0"
            },
            {
              "label": "1",
              "value": "1"
            }
          ]
        },
        {
          "count": 1,
          "attribute_code": "sale",
          "label": "Sale",
          "options": [
            {
              "label": "0",
              "value": "0"
            }
          ]
        },
        {
          "count": 9,
          "attribute_code": "style_general",
          "label": "Style General",
          "options": [
            {
              "label": "Insulated",
              "value": "5543"
            },
            {
              "label": "Lightweight",
              "value": "5546"
            },
            {
              "label": "Hooded",
              "value": "5547"
            },
            {
              "label": "Rain Coat",
              "value": "5549"
            },
            {
              "label": "Hard Shell",
              "value": "5550"
            },
            {
              "label": "Soft Shell",
              "value": "5551"
            },
            {
              "label": "Windbreaker",
              "value": "5552"
            },
            {
              "label": "¼ zip",
              "value": "5554"
            },
            {
              "label": "Full Zip",
              "value": "5555"
            }
          ]
        },
        {
          "count": 2,
          "attribute_code": "pattern",
          "label": "Pattern",
          "options": [
            {
              "label": "Color-Blocked",
              "value": "5621"
            },
            {
              "label": "Solid",
              "value": "5623"
            }
          ]
        },
        {
          "count": 8,
          "attribute_code": "climate",
          "label": "Climate",
          "options": [
            {
              "label": "All-Weather",
              "value": "5628"
            },
            {
              "label": "Cool",
              "value": "5630"
            },
            {
              "label": "Indoor",
              "value": "5631"
            },
            {
              "label": "Mild",
              "value": "5632"
            },
            {
              "label": "Rainy",
              "value": "5633"
            },
            {
              "label": "Spring",
              "value": "5634"
            },
            {
              "label": "Warm",
              "value": "5635"
            },
            {
              "label": "Windy",
              "value": "5636"
            }
          ]
        }
      ],
      "items": [
        {
          "id": 132,
          "sku": "MH05",
          "name": "Hollister Backyard Sweatshirt"
        },
        {
          "id": 164,
          "sku": "MH07",
          "name": "Hero Hoodie"
        },
        {
          "id": 292,
          "sku": "MJ02",
          "name": "Hyperion Elements Jacket"
        },
        {
          "id": 404,
          "sku": "MJ06",
          "name": "Jupiter All-Weather Trainer "
        },
        {
          "id": 420,
          "sku": "MJ03",
          "name": "Montana Wind Jacket"
        }
      ]
    }
  }
}

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!