How to get product attribute value, label using GraphQl in Magento 2?

LinkedIn0 Facebook0 Tweet0 Pin0

How to get product attribute value, label using GraphQl in Magento 2? – Today we can discuss about product attribute and how to get the product attributes values in Graphql. We can directly get the attribute value from native GraphQl query. We can get the custom attributes value also by passing the attribute_code to the GraphQl query.

But we have some issues when the attribute type is select box or multi-select. For select box or multi-select attributes the native GraphQl query only returns the value not the label of the value.

As far as is searched i couldn’t find a way to get the labels. So i achieved this with the custom module.I will explain here how i did it with the custom module.

So we need to create a simple module. I am not going to explain it.Apart from that we need to create shema.gaphqls file under etc directory. Resolver file under Model/Resolver directory.
A data provider file under Module/Resolver/Dataprovider directory.We are going to pass the SKU of the product and get the attributes values.

A data provider file under Module/Resolver/Dataprovider directory.We are going to pass the SKU of the product and get the attributes values.

schema.graphqls file

type Query {
    attributeValues (
        sku: String @doc(description: "SKU of the product")
    ): [Productdata] @resolver(class: "Ayakil\\ProductsGraphQl\\Model\\Resolver\\Productsgraphql") @doc(description: "The productdata query returns the product attributes")
}

type Productdata @doc(description: "all Attributes to show in Product Details Page") {
    atr_data : String  @doc(description: "all atributes")
}

type Query {

attributeValues (

sku: String @doc(description: "SKU of the product")

): [Productdata] @resolver(class: "Ayakil\\ProductsGraphQl\\Model\\Resolver\\Productsgraphql") @doc(description: "The productdata query returns the product attributes")

}

type Productdata @doc(description: "all Attributes to show in Product Details Page") {

atr_data : String @doc(description: "all atributes")

}

Resolver file

<?php

namespace Ayakil\ProductsGraphQl\Model\Resolver;

use Magento\Framework\Exception\NoSuchEntityException;
use Magento\Framework\GraphQl\Config\Element\Field;
use Magento\Framework\GraphQl\Exception\GraphQlInputException;
use Magento\Framework\GraphQl\Exception\GraphQlNoSuchEntityException;
use Magento\Framework\GraphQl\Query\ResolverInterface;
use Magento\Framework\GraphQl\Schema\Type\ResolveInfo;

class Productsgraphql implements ResolverInterface
{
    private $productsgraphqlDataProvider;

    /**
     * @param DataProvider\Productsgraphql $productsgraphqlDataProvider
     */
    public function __construct(
        \Ayakil\ProductsGraphQl\Model\Resolver\DataProvider\Productsgraphql $productsgraphqlDataProvider
    ) {
        $this->productsgraphqlDataProvider = $productsgraphqlDataProvider;
    }

    /**
     * @inheritdoc
     */
    public function resolve(
        Field $field,
        $context,
        ResolveInfo $info,
        array $value = null,
        array $args = null
    ) {
        //by SKU
        $sku = $this->getSku( $args);
        $productsData = $this->productsgraphqlDataProvider->getAttributesBySku( $sku );

        return $productsData;
    }

    private function getSku(array $args)
    {
        if (!isset($args['sku'])) {
            throw new GraphQlInputException(__('"SKU should be specified'));
        }
        return $args['sku'];
    }
}

<?php

namespace Ayakil\ProductsGraphQl\Model\Resolver;

use Magento\Framework\Exception\NoSuchEntityException;

use Magento\Framework\GraphQl\Config\Element\Field;

use Magento\Framework\GraphQl\Exception\GraphQlInputException;

use Magento\Framework\GraphQl\Exception\GraphQlNoSuchEntityException;

use Magento\Framework\GraphQl\Query\ResolverInterface;

use Magento\Framework\GraphQl\Schema\Type\ResolveInfo;

class Productsgraphql implements ResolverInterface

{

private $productsgraphqlDataProvider;

/**

* @param DataProvider\Productsgraphql $productsgraphqlDataProvider

public function __construct(

\Ayakil\ProductsGraphQl\Model\Resolver\DataProvider\Productsgraphql $productsgraphqlDataProvider

) {

$this->productsgraphqlDataProvider = $productsgraphqlDataProvider;

}

/**

* @inheritdoc

public function resolve(

Field $field,

$context,

ResolveInfo $info,

array $value = null,

array $args = null

) {

//by SKU

$sku = $this->getSku( $args);

$productsData = $this->productsgraphqlDataProvider->getAttributesBySku( $sku );

return $productsData;

}

private function getSku(array $args)

{

if (!isset($args['sku'])) {

throw new GraphQlInputException(__('"SKU should be specified'));

}

return $args['sku'];

}

Retrieve product attribute in data provider file

<?php

namespace Ayakil\ProductsGraphQl\Model\Resolver\DataProvider;

class Productsgraphql extends \Magento\Framework\View\Element\Template
{
    protected $_productRepository;

    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Catalog\Model\ProductRepository $productRepository,
        array $data = []
        )
    {
        $this->_productRepository = $productRepository;
        parent::__construct($context, $data);
    }

    /**
     * @params string $sku
     * this function return all the product data by product sku
     **/
    public function getProductBySku($sku)
    {
        return $this->_productRepository->get($sku);
    }
    /**
     * @params int $id
     * this function return all the word of the day by id
     **/
    public function getAttributesBySku( $sku ){
        $_product = $this->getProductBySku($sku);
        $attributes = $_product->getAttributes();// All Product Attributes

        $attributes_data = [];
        $x=0;
        foreach ($attributes as $attribute) {
            if($attribute->getIsUserDefined()){ // Removed the system product attribute by checking the current attribute is user created
                $attributeLabel = $attribute->getFrontend()->getLabel();
                $attributeValue = $attribute->getFrontend()->getValue($_product);

                if($attribute->getAttributeCode()=="language"){
                    $attributeLabelAndValue = $attributeLabel." - ".$attributeValue;
                    $attributes_data[$x]['atr_data'] = $attributeLabelAndValue;
                }
            }
            $x++;
        }
        return $attributes_data;
    }
}

<?php

namespace Ayakil\ProductsGraphQl\Model\Resolver\DataProvider;

class Productsgraphql extends \Magento\Framework\View\Element\Template

{

protected $_productRepository;

public function __construct(

\Magento\Backend\Block\Template\Context $context,

\Magento\Catalog\Model\ProductRepository $productRepository,

array $data = []

)

{

$this->_productRepository = $productRepository;

parent::__construct($context, $data);

}

/**

* @params string $sku

* this function return all the product data by product sku

**/

public function getProductBySku($sku)

{

return $this->_productRepository->get($sku);

}

/**

* @params int $id

* this function return all the word of the day by id

**/

public function getAttributesBySku( $sku ){

$_product = $this->getProductBySku($sku);

$attributes = $_product->getAttributes();// All Product Attributes

$attributes_data = [];

$x=0;

foreach ($attributes as $attribute) {

if($attribute->getIsUserDefined()){ // Removed the system product attribute by checking the current attribute is user created

$attributeLabel = $attribute->getFrontend()->getLabel();

$attributeValue = $attribute->getFrontend()->getValue($_product);

if($attribute->getAttributeCode()=="language"){

$attributeLabelAndValue = $attributeLabel." - ".$attributeValue;

$attributes_data[$x]['atr_data'] = $attributeLabelAndValue;

}

$x++;

}

return $attributes_data;

}

That’s it. I used if($attribute->getIsUserDefined()) to check the attribute is Custom or System attribute.
If we want to get only some attributes value and label.We can use if($attribute->getAttributeCode()==”language”) and get relevant data.For this just pass the custom attribute_code as an array and can get it.
Now lets see the GraphQl query and result.

query attributeValues{
attributeValues( sku : “24-MB02”) {
atr_data
}
}

This query will return entire custom product attributes.

product attribute value and label in graphql — sample GraphQl **Request Payload** and **Result**

In This result Languages is the multi-select attribute and it returns the result like “Languages:- English, Tamil, Sinhala”.So in this article we write a custom GraphQl module to get the attribute value, label for products.

Attribute languages - Multi select — Attribute languages – Multi select

That’s it. Have a nice day.Enjoy coding , Learn , Experience , Teach and Help.

Post Views: 2,139

LinkedIn0 Facebook0 Tweet0 Pin0

17 thoughts on “How to get product attribute value, label using GraphQl in Magento 2?”

spik3s says:

October 23, 2019 at 3:52 pm

There are typos in your code.

In resolver, you are calling getAttriNutesBySku and in DataProvider you are missing a coma in __contruct() after $productRepository 🙂

1. Mujahidh Haseem says:
  
  October 24, 2019 at 4:27 pm
  
  great thanks, I corrected the content.
  
P manna says:

February 7, 2020 at 12:03 am

Please provide full module

1. Mujahidh Haseem says:
  
  February 7, 2020 at 6:05 pm
  
  Thank you for the reading. I have sent the module to your email.
  
Nicolò says:

February 19, 2020 at 1:34 pm

Can I have the full module ? Thanks in advance

1. Mujahidh Haseem says:
  
  February 24, 2020 at 12:51 pm
  
  thanks for reading. I will send.
  
Rv says:

March 18, 2020 at 3:51 pm

Can you please send me a complete module

Ravi says:

March 19, 2020 at 11:48 am

Kindly provide me complete module

1. Mujahidh Haseem says:
  
  March 20, 2020 at 7:51 pm
  
  thanks for reading my blog.I will send you.
  
margo2blogsite says:

March 21, 2020 at 5:20 am

I savor, lead to I discovered just what I was having a look
for. You’ve ended my 4 day lengthy hunt! God Bless you man.
Have a great day. Bye

margo2blog says:

March 23, 2020 at 4:53 am

I have been browsing on-line more than 3 hours lately, but I never discovered any attention-grabbing article
like yours. It’s pretty price enough for me.
Personally, if all website owners and bloggers made excellent
content as you probably did, the internet will likely be
much more helpful than ever before.

1. Mujahidh Haseem says:
  
  April 2, 2020 at 6:40 am
  
  Thank you. It means a lot 🙂
  
now says:

March 30, 2020 at 6:23 pm

I am regular visitor, how are you everybody? This paragraph posted at this web page is truly good.

1. Mujahidh Haseem says:
  
  April 2, 2020 at 6:36 am
  
  Than you very much for reading.
  
Renee says:

April 17, 2020 at 7:36 pm

Great read, very helpful. Is there anyway you could share the full module with me as well please?

Thanks

1. Mujahidh Haseem says:
  
  April 18, 2020 at 11:17 am
  
  Hi Renee,
  Thanks for the reading. Yes definitely i will share the module for you.
  
Harry says:

July 5, 2020 at 4:35 am

would you please send me the full working module? Thanks