BLOG . Ecommerce

In modern ecommerce, businesses need to deliver personalized and refined product discovery experiences. However, Magento 2 (Adobe Commerce) does not allow custom filter attributes in category GraphQL queries out of the box. This makes it challenging for businesses to expose custom attributes like “is_popular” on headless frontends or PWA storefronts.

In this blog, learn 6 simple steps to add a custom filter attribute to the GraphQL query, allowing it to be used in API requests for dynamic frontend experiences.

Two Main operations of GraphQL are in use:

• Queries: To read and get Data from the Database
• Mutations: To create, update and delete data from the database

Steps To Create a GraphQL Module in Magento 2

Step 1: Create a registration.php file

Create a registration.php file in app/code/Klizer/Graphql/registration.php

<?php
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
	ComponentRegistrar::MODULE,
	'Klizer_Graphql',
	__DIR__
);

Step 2: Create a module.xml File

Create a new module.xml file in the etc directory.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
	<module name="Klizer_Graphql" setup_version="1.0.0">
   	 <sequence>
        	<module name="Magento_Catalog" />
    	</sequence>
	</module>
</config>

Step 3: Define the GraphQL Schema

create a file in app/code/Klizer/Graphql/etc/schema.graphls

In my case, I want to add my custom category attribute(“is_popular) in the existing category graphql endpoint. So im here adding my custom attribute the Category Interface extending from /vendor/Magento/CatalogGraphQl/etc/schema.graphqls

//Adding the custom attribute in categoryList Query
interface CategoryInterface {
	is_popular: String @doc(description: "Custom Category Attribute")
  	@resolver(
    	class: "Klizer\\Graphql\\Model\\Resolver\\Category\\CustomCategoryAttribute"
  	)
}
//To add  the custom attribute in categoryList Query filter

input CategoryFilterInput {
  is_popular: FilterEqualTypeInput @doc(description: "Category Data filter with Custom Attribute Value")
}

Step 4: Define the Schema Resolver

Create a file in Klizer/Graphql/Model/Resolver/Category/CustomCategoryAttribute.php

<?php
namespace Klizer\Homepage\Model\Resolver\Category;
use Magento\Framework\GraphQl\Query\ResolverInterface;
/**
 * Category custom attribute field resolver
 */
class CustomCategoryAttribute implements ResolverInterface
{
	/**
 	* @var Magento\Catalog\Model\Category
 	*/
	protected $categoryModel;

	/**
 	* @param \Magento\Catalog\Model\Category $categoryModel
 	*/
	public function __construct(
    	\Magento\Catalog\Model\Category $categoryModel
	) {
    	$this->categoryModel = $categoryModel;
	}

	/**
 	* @inheritdoc
 	*/
	public function resolve(
    	\Magento\Framework\GraphQl\Config\Element\Field $field,
    	$context,
    	\Magento\Framework\GraphQl\Schema\Type\ResolveInfo $info,
    	array $value = null,
    	array $args = null
	) {
    	$category = $value['model'];
    	$_category = $this->categoryModel->load($category->getId());
    	return $_category->getData('is_popular');
	}
}

Step 5: Run the Magento Commands

bin/magento module:enable Klizer_Graphql
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento cache:clean

Step 6: Test and Run Graphql

Request Payload

{
  categoryList(filters: {is_popular: { eq: "1" }}) {
	id
	image
	include_in_menu
	is_anchor
	is_popular
	name
	path
	path_in_store
	position
  }
}
Result:

{
  "data": {
	"categoryList": [
  	{
    	"id": 20,
    	"image": null,
    	"include_in_menu": 1,
    	"is_anchor": 0,
    	"is_popular": 1,
    	"name": "Women",
    	"path": "1/2/20",
    	"path_in_store": null,
    	"position": 2
  	},
  	{
    	"id": 22,
    	"image": null,
    	"include_in_menu": 1,
    	"is_anchor": 1,
    	"is_popular": 1,
    	"name": "Bottoms",
    	"path": "1/2/20/22",
    	"path_in_store": null,
    	"position": 2
  	}
	]
  }
}

Adding Custom Filter Attribute in Category GraphQL for Magento 2

By adding a custom filter attribute in category GraphQL, Magento 2 (Adobe Commerce) becomes far more adaptable for headless ecommerce, PWA storefronts, and custom frontend experiences. This approach allows developers to expose business-specific attributes, which enables more personalized and dynamic content filtering via APIs.

Looking to implement similar customizations or scale your ecommerce store with expert guidance? Explore our expert Magento solutions services or connect with Klizer, one of the best Magento solution partners for tailored ecommerce solutions backed by deep industry expertise.