Magento 2 How to get Home Page in GraphQL

In this article we will show you how to get the home page data using GraphQL. First of all, we need to get the home page identifier using storeConfig query.

Use following query to get Home page identifier using storeConfig query.

Request

{
  storeConfig {
    cms_home_page
  }
}

Response

{
  "data": {
    "storeConfig": {
      "cms_home_page": "home"
    }
  }
}

Now, you can get the CMS Home Page data using above identifier home in the following cmsPage query. Check cmsPage GraphQL query article more informations.

Request

{
  cmsPage(identifier: "home") {
    title
    url_key
    content_heading
    content
    page_layout
    meta_title
    meta_keywords
    meta_description
  }
}

Response

{
  "data": {
    "cmsPage": {
      "title": "Home Page",
      "url_key": "home",
      "content_heading": "Home Page",
      "content": "<p><div class=\"message info\" style=\"margin-top: 50px;\">\n    <p><strong>Try Demo Customer Access</strong></p>\n    <p><span style=\"display:inline-block; width: 80px; padding-right: 10px;\">Email:</span>roni_cost@example.com</p>\n    <p><span style=\"display:inline-block; width: 80px; padding-right: 10px;\">Password:</span>roni_cost3@example.com</p>\n</div></p>",
      "page_layout": "1column",
      "meta_title": "",
      "meta_keywords": "",
      "meta_description": ""
    }
  }
}

Now, in case if you want to get a static block then use CMS Block identifier and get CMS Block data using cmsBlock query. You can also get other data like sliders, banners, etc using block identifier.

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.