GraphQL in Magento 2.

An Articles for the GraphQL in Magento 2.

From the Magento 2.3 and Higher Version, Out of the box, GraphQL Feature will be available in Native installation. GraphQL is the Type of API for the front end UI with a Headless Approach.

First comes in Mind What is the GraphQL?
GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.

GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need, and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools. (Source: Graphql.org)

GraphQL is used for optimizing performance and flexibility. Its nature like what you need in a response, gets an exactly predictable result in a response.

They have the capability to get more resources in the single request so Apps using GraphQL is fast and stable while comparing to REST API you got a response as the whole bunch of data for a specific action.

How to access GraphQL:
GraphiQL is an in-browser tool for write and testing your GraphQL queries. You can download an addon from your browser’s app store.

For Google Chrome, ChromeiQL extension is supported, GraphQL Query. Others are Altair GraphQL addon used in both Firefox as well as Chrome.

Create a simple module by reading article, Check Custom GraphQL module using Magento 2

To start using GraphQL, set the GraphQL endpoint by entering your site URL suffix with GraphQL.  {YOUR_SITE_FRONT_URL}/graphql in the URL bar, now click on Set endpoint button.

For Magento 2.3 Localhost, I have passed URL for GraphQl as http://127.0.0.1/magento2-2.3-develop/graphql
Check Screenshot for CMS Module’s GraphQL Demo,

I have tested CMS Page GraphQl demo for access CMS Page data by GraphQL, Magneto 2.3 Comes with New Module called Magento_CmsGraphQl  That module is responsible for CMS page GraphQl Query languages. You can get Page and Block’s Data using GraphQL.

Body for CMS Page request in GraphQL,

{
  cmsPage(
    id: 2
  ) {
    url_key
    title
    content
    content_heading
    page_layout
    meta_title
    meta_keywords
    meta_description
  }
}

In the above field Id is your Cms page id, You need to add your CMS page id which you want to get data of a specific page. We have passed id as 2 and 2 is homepage id for CMS page. Based on Id you got the response which you have passed the field in the body.

If you want only url_key and title, You just need to pass url_key and title as a body in the above request so your response will be got only url_key and title of a page.

Native Magento CMS GraphQL supports url_key, title, content, content_heading , page_layout, meta_title, meta_keywords, meta_description field.

You can pass all the above fields or any single field in the body of cmsPageGraphQl. For the given request body, a response would be like,

{
  "data": {
    "cmsPage": {
      "url_key": "home",
      "title": "Home page",
      "content": "<p>CMS homepage content goes here.</p>\r\n",
      "content_heading": "Home Page",
      "page_layout": "1column",
      "meta_title": null,
      "meta_keywords": null,
      "meta_description": null
    }
  }
}

As per Magento Devdocs,  You can access the GraphQL feature only in Magento developer mode. If you don’t have Magento mode is developer please first set mode developer using CLI,

php bin/magento deploy:mode:set developer

In Magento Code instance,

Magento_GraphQl is the parent Module for all the GraphQL related module, provides the framework for the application to expose GraphQL compliant web services. You can check it under app/code/Magento/GraphQl path.

SInce the Introduced of GraphQL from the 2.3 Version to latest Magento 2.4 Version has lot of improvements on newly added GraphQL module.

Magento also focus on B2B and Commerce Version with GraphQL module rapidly to larger store to deal with Headless approach.

Check All the Latest GraphQL related articles by click, Latest GraphQL articles.