How to Get CMS Block Content using GraphQL in Magento 2

In this tutorial, Today I will explain to how to get cms block content using GraphQL in Magento 2. After Magento 2.3.x, we can use GraphQL which is useful as an alternate option of REST API and SOAP API.

GraphQL is one of the query language for the API which is used to load only requested data from server. If we want to get cms block content using GraphQL then, how can we fetch?

Let’s follow the below steps :

You may also like this :

Execute URL : {baseURL}/graphql

Where Base URL : http://m2421.com/ (your store base url) and End Point : graphql

In Request Body, You need to pass below data.

For Single CMS Block :

Copy Code


{
  cmsBlocks(identifiers: "giftcard-block") {
    items {
      identifier
      title
      content
    }
  }
}

For Multiple CMS Block :

Copy Code


{
  cmsBlocks(identifiers: ["giftcard-block", "footer_links_block"]) {
    items {
      identifier
      title
      content
    }
  }
}

Response :

Copy Code


{
  "data": {
    "cmsBlocks": {
      "items": [
        {
          "identifier": "giftcard-block",
          "title": "Giftcard Block",
          "content": "<div class=\"blocks-promo\">\n    <div class=\"block-promo-wrapper block-promo-2columns\">\n        <a href=\"http://m2421.com/\" class=\"block-promo giftcard-mailed\">\n            <span class=\"content\">\n                <strong class=\"title\">Give it away now</strong>\n                <span class=\"info\">A gift card always beats a blind guess</span>\n                <span class=\"more icon\">Mailed Gift Cards</span>\n            </span>\n            <span class=\"image\"><img src=\"http://m2421.com/media/wysiwyg/giftcards/giftcard-mailed.jpg\" alt=\"\" /></span>\n        </a>\n        <a href=\"http://m2421.com/\" class=\"block-promo giftcard-virtual\">\n            <img src=\"http://m2421.com/media/wysiwyg/giftcards/giftcard-virtual.png\" alt=\"\" />\n            <span class=\"content\">\n                <strong class=\"title\">Can't decide?</strong>\n                <span class=\"info\">Just remember it's the card that counts</span>\n                <span class=\"more icon\">Virtual Gift Cards</span>\n            </span>\n        </a>\n    </div>\n</div>"
        },
        {
          "identifier": "footer_links_block",
          "title": "Footer Links Block",
          "content": "<ul class=\"footer links\">\n    <li class=\"nav item\"><a href=\"http://m2421.com/about-us/\">About us</a></li>\n    <li class=\"nav item\"><a href=\"http://m2421.com/customer-service/\">Customer Service</a></li>\n</ul>\n"
        }
      ]
    }
  }
}

Here, This response is about multiple CMS block query response.

That’s it !!!

I hope this blog is easy to understand about how to get cms block content using GraphQL in Magento 2. In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with proper solution.

Stay Safe and Stay Connected !!

Post Views: 3,927