{"id":2228,"date":"2024-12-26T11:43:32","date_gmt":"2024-12-26T09:43:32","guid":{"rendered":"https:\/\/plumrocket.com\/learn\/?p=2228"},"modified":"2025-04-02T13:09:58","modified_gmt":"2025-04-02T10:09:58","slug":"guide-on-using-magento-2-graphql-query-example","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/learn\/magento-2-graphql","title":{"rendered":"Guide on Using Magento 2 GraphQL + Query Example"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full disable_zoom\"><img loading=\"lazy\" width=\"1600\" height=\"600\" src=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/12\/magento-2-graphql-1.png\" alt=\"Guide on Using Magento 2 GraphQL + Query Example\" class=\"wp-image-2240\" srcset=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/12\/magento-2-graphql-1.png 1600w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/12\/magento-2-graphql-1-300x113.png 300w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/12\/magento-2-graphql-1-1024x384.png 1024w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/12\/magento-2-graphql-1-768x288.png 768w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/12\/magento-2-graphql-1-1536x576.png 1536w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/12\/magento-2-graphql-1-1568x588.png 1568w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p>Ofen ecommerce websites deal with a wide range of data, which is essential for delivering products or services. To manage data efficiently and provide the best service, online stores need optimal solutions. Thus, ecommerce websites often use GraphQL to streamline their data fetching processes and ensure a seamless user experience.<\/p>\n\n\n\n<p>In this tutorial, we\u2019ll explore the fundamentals of GraphQL and compare it with REST. Also, look at the Magento 2 GraphQL query examples for the <a href=\"\/magento-size-chart\">Magento 2 Size Chart Extension<\/a> to gain insights into how GraphQL can be applied to various ecommerce scenarios.<\/p>\n\n\n\n<h2>What is GraphQL?<\/h2>\n\n\n\n<p>GraphQL is an API (Application Programming Interface) data query protocol. This language helps to query exactly the data you need and nothing more. GraphQL was developed by Facebook for their own APIs that they provide to their customers, but it quickly became used by other API developers.<\/p>\n\n\n\n<h2>What Differs GraphQL API from REST API<\/h2>\n\n\n\n<p>GraphQL and REST are often compared to each other because both are used to build and interact with API. However, GraphQL offers some advantages:<\/p>\n\n\n\n<ul><li>Better performance: GraphQL is faster than REST because it doesn\u2019t need multiple requests and minimizes data transfer by allowing clients to specify exactly what data they need.<\/li><li>Fewer endpoints: in REST, each operation has its own endpoint, while in GraphQL there is only one.<\/li><li>No data redundancy: in REST, the client receives all the data that is provided for a specific endpoint, even if there is no need for this. In GraphQL, the clients can specify what data they need, reducing the over-fetching and under-fetching of data.<\/li><\/ul>\n\n\n\n<h2>GraphQL in Magento 2: How It Works<\/h2>\n\n\n\n<h3>Schema definition<\/h3>\n\n\n\n<p>All operations in GraphQL are based on so-called schemas, which contain all available methods, entities, and fields that a user can retrieve. To retrieve the schema, you can use the following query:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-json\">\nquery IntrospectionQuery {\n __schema {\n   queryType {\n     name\n   }\n   mutationType {\n     name\n   }\n   subscriptionType {\n     name\n   }\n   types {\n     ...FullType\n   }\n }\n}\nfragment FullType on __Type {\n kind\n name\n description\n fields(includeDeprecated: true) {\n   name\n   description\n   args {\n     ...InputValue\n   }\n   type {\n     ...TypeRef\n   }\n   isDeprecated\n   deprecationReason\n }\n inputFields {\n   ...InputValue\n }\n interfaces {\n   ...TypeRef\n }\n enumValues(includeDeprecated: true) {\n   name\n   description\n   isDeprecated\n   deprecationReason\n }\n possibleTypes {\n   ...TypeRef\n }\n}\nfragment InputValue on __InputValue {\n name\n description\n type {\n   ...TypeRef\n }\n defaultValue\n}\nfragment TypeRef on __Type {\n kind\n name\n ofType {\n   kind\n   name\n   ofType {\n     kind\n     name\n     ofType {\n       kind\n       name\n       ofType {\n         kind\n         name\n         ofType {\n           kind\n           name\n           ofType {\n             kind\n             name\n             ofType {\n               kind\n               name\n             }\n           }\n         }\n       }\n     }\n   }\n }\n}\n<\/code><\/pre><\/div>\n\n\n\n<h3>Data query and mutations<\/h3>\n\n\n\n<p>Requests should be sent to the <code>\/graphql<\/code> endpoint ( <code>{site-domain}\/graphql<\/code> ). This endpoint receives a list of data that the server is expected to send back to the client. These fields are structured hierarchically according to a defined schema.<\/p>\n\n\n\n<p>In addition to querying data, Magento 2 GraphQL also supports mutations. These are special operations for creating, updating, or deleting data. For example, mutations are used to register users, change user data, add products to the cart, or create orders. Similar to queries, mutations allow a client to specify fields that should be returned after performing a mutation.<\/p>\n\n\n\n<h3>Execution Process<\/h3>\n\n\n\n<p>When the server receives a GraphQL request, it parses the query, validates whether the request matches the schema, and then passes it to the appropriate resolver to retrieve the data.<\/p>\n\n\n\n<h3>Data acquisition<\/h3>\n\n\n\n<p>In GraphQL, data is handled using resolvers. Each resolver function has its own responsibility for a specific field as defined in the schema. Resolvers can handle data from both the Magento 2 database and other external systems.<\/p>\n\n\n\n<p>The resolver fetches the list of data that the client wants to receive, performs necessary data transformations, and returns the result to the GraphQL runtime, which then sends the response back to the client.<\/p>\n\n\n\n<h3>Respond<\/h3>\n\n\n\n<p>After receiving or processing data, the GraphQL server generates a response in JSON format and sends it back to the client. The structure of the response reflects exactly the structure of the request sent by the client.<\/p>\n\n\n\n<h2>Magento 2 GraphQL Query Examples for the Size Chart Extension<\/h2>\n\n\n\n<h3>Query Example for Retrieving The Extension Status<\/h3>\n\n\n\n<p>The <a href=\"\/magento-size-chart\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 Size Chart extension<\/a> allows you to check its configuration, specifically whether the module is enabled, using a standard Magento 2 GraphQL query. This query verifies if the extension is active in your store\u2019s configuration. It is especially useful during setup, troubleshooting, or when integrating custom solutions that rely on the module&#8217;s functionality to ensure accurate operation.<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div class=\"prism-title\">Schema Extension for the Standard StoreConfig Type<\/div><pre><code class=\"language-json\">type StoreConfig @doc(description: \"The type contains information about a store config\") {\n   pr_size_chart_enabled: Boolean @doc(description: \"Define Plumrocket Size Chart module status\")\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div class=\"prism-title\">Query Body<\/div><pre><code class=\"language-json\">query {\n   storeConfig {\n       pr_size_chart_enabled\n   }\n}\n<\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div class=\"prism-title\">Result<\/div><pre><code class=\"language-json\">{\n   \"data\": {\n       \"storeConfig\": {\n           \"pr_size_chart_enabled\": false\n       }\n   }\n}\n<\/code><\/pre><\/div>\n\n\n\n<h3>Query Example for Retrieving Product\u2019s Size Chart<\/h3>\n\n\n\n<p>The extension provides a query to fetch detailed size chart information for a specific product. Use this query to fetch detailed size chart information for a specific product, including its content, styling, and display options. It is ideal for dynamically displaying tailored size charts on product pages, improving user experience, and ensuring accurate fit recommendations.<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div class=\"prism-title\">Description of the query to get the size table<\/div><pre><code class=\"language-json\">type Query {\n   prSizeChart (\n       productId: Int @doc(description: \"Id of the Product\") @doc(description: \"The Size Chart query returns information about a Size Charts\")\n   ): SizeChart @doc(description: \"The Size Chart query returns information about a Size Charts\")\n}\n<\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div class=\"prism-title\">Description of the SizeChart type with a list of available fields for this entity<\/div><pre><code class=\"language-json\">type SizeChart @doc(description: \"Size Chart defines all Size Chart information\") {\n   id: String @doc(description: \"Identifier of the Size Chart\")\n   name: String @doc(description: \"Name of Size Chart\")\n   content: String @doc(description: \"Size Chart content\")\n   display_type: String @doc(description: \"Display type of Size Chart\")\n   button_color: String @doc(description: \"Size Chart button color\")\n   button_border_color: String @doc(description: \"Size Chart button border color\")\n   button_text_color: String @doc(description: \"Size Chart button text color\")\n   button_icon: String @doc(description: \"Size Chart button icon url\")\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div class=\"prism-title\">Query body  (the example for a product with ID 1)<\/div><pre><code class=\"language-json\">query {\n   prSizeChart(productId: 1) {\n       id\n       name\n       content\n       display_type\n       button_color\n       button_border_color\n       button_text_color\n       button_icon\n   }\n}\n<\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div class=\"prism-title\">Result<\/div><pre><code class=\"language-json\">{\n   \"data\": {\n       \"prSizeChart\": {\n           \"id\": \"1\",\n           \"name\": \"Men's Shoes\",\n           \"content\": \"&lt;div class=\\\"window-title\\\">&lt;h3>Men's Shoes&lt;\/h3>&lt;\/div>\\r\\n&lt;table class=\\\"table_size\\\">\\r\\n&lt;tbody>\\r\\n&lt;tr>&lt;th class=\\\"header-cell cell\\\">Men US&lt;\/th>&lt;th class=\\\"header-cell cell\\\">EU&lt;\/th>&lt;th class=\\\"header-cell cell\\\">UK&lt;\/th>&lt;th class=\\\"header-cell cell\\\">CN&lt;\/th>&lt;\/tr>\\r\\n&lt;tr>\\r\\n&lt;td class=\\\"cell\\\">5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">38&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">4&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">38&lt;\/td>\\r\\n&lt;\/tr>\\r\\n&lt;tr>\\r\\n&lt;td class=\\\"cell\\\">5.5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">38.5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">4.5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">39&lt;\/td>\\r\\n&lt;\/tr>\\r\\n&lt;tr>\\r\\n&lt;td class=\\\"cell\\\">6&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">39&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">39.5&lt;\/td>\\r\\n&lt;\/tr>\\r\\n&lt;tr>\\r\\n&lt;td class=\\\"cell\\\">6.5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">39.5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">5.5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">40&lt;\/td>\\r\\n&lt;\/tr>\\r\\n&lt;tr>\\r\\n&lt;td class=\\\"cell\\\">7&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">40&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">6&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">41&lt;\/td>\\r\\n&lt;\/tr>\\r\\n&lt;tr>\\r\\n&lt;td class=\\\"cell\\\">7.5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">40.5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">6.5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">41.5&lt;\/td>\\r\\n&lt;\/tr>\\r\\n&lt;tr>\\r\\n&lt;td class=\\\"cell\\\">8&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">41&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">7&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">42&lt;\/td>\\r\\n&lt;\/tr>\\r\\n&lt;tr>\\r\\n&lt;td class=\\\"cell\\\">8.5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">41.5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">7.5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">43&lt;\/td>\\r\\n&lt;\/tr>\\r\\n&lt;tr>\\r\\n&lt;td class=\\\"cell\\\">9&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">42&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">8&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">43.5&lt;\/td>\\r\\n&lt;\/tr>\\r\\n&lt;tr>\\r\\n&lt;td class=\\\"cell\\\">9.5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">42.5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">8.5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">44&lt;\/td>\\r\\n&lt;\/tr>\\r\\n&lt;tr>\\r\\n&lt;td class=\\\"cell\\\">10&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">43&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">9&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">44.5&lt;\/td>\\r\\n&lt;\/tr>\\r\\n&lt;tr>\\r\\n&lt;td class=\\\"cell\\\">10.5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">43.5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">9.5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">45&lt;\/td>\\r\\n&lt;\/tr>\\r\\n&lt;tr>\\r\\n&lt;td class=\\\"cell\\\">11&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">44&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">10&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">45.5&lt;\/td>\\r\\n&lt;\/tr>\\r\\n&lt;tr>\\r\\n&lt;td class=\\\"cell\\\">12&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">44.5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">10.5&lt;\/td>\\r\\n&lt;td class=\\\"cell\\\">46&lt;\/td>\\r\\n&lt;\/tr>\\r\\n&lt;tr>\\r\\n&lt;td colspan=\\\"4\\\">\\r\\n&lt;p>&lt;strong>&lt;strong>Fiercely Fitted = Lorem Ipsum.&lt;br \/>&lt;\/strong>&lt;\/strong>Please check the measurement chart carefully.&lt;\/p>\\r\\n&lt;\/td>\\r\\n&lt;\/tr>\\r\\n&lt;\/tbody>\\r\\n&lt;\/table>\",\n           \"display_type\": \"0\",\n           \"button_color\": \"#fffff\",\n           \"button_border_color\": \"\",\n           \"button_text_color\": \"#3399cc\",\n           \"button_icon\": \"https:\/\/app.mage246.dev\/static\/version1731363249\/frontend\/Magento\/luma\/en_US\/Plumrocket_SizeChart\/images\/rule.png\"\n       }\n   }\n}<\/code><\/pre><\/div>\n\n\n\n<h2>Conclusion<\/h2>\n\n\n\n<p>GraphQL in Magento 2 is a helpful tool for streamlining data fetching by enabling precise data queries and minimizing unnecessary data transfer. Compared to RESP APIs, GraphQL offers better performance, fewer endpoints, and reduced data redundancy, when compared to RESP API.<\/p>\n\n\n\n<p>So, by incorporating GraphQL into your Magento 2 store, you can enhance performance, improve data fetching efficiency, and deliver a seamless shopping experience for your customers. <\/p>\n\n\n\n<div class=\"wp-block-cover has-background-dim\" style=\"background-color:#f7f7f7;min-height:100px\"><div class=\"wp-block-cover__inner-container\">\n<p style=\"margin-bottom:-5px\" class=\"has-text-align-center has-dark-gray-color has-text-color\"><span class=\"has-inline-color has-dark-gray-color\">If you require any support or have specific questions not covered in this guide, please feel free to <\/span><a href=\"https:\/\/plumrocket.com\/contacts\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"has-inline-color has-secondary-color\">contact us<\/span><\/a>.<\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Ofen ecommerce websites deal with a wide range of data, which is essential for delivering products or services. To manage data efficiently and provide the best service, online stores need optimal solutions. Thus, ecommerce websites often use GraphQL to streamline their data fetching processes and ensure seamless user experience.<\/p>\n<p>In this tutorial, we\u2019ll explore the fundamentals of GraphQL and compare it with REST. Also, look at the Magento 2 GraphQL query examples for the Size Chart Extension to gain insights into how GraphQL can be applied to various ecommerce scenarios.<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[125],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Guide on Using Magento 2 GraphQL + Query Example<\/title>\n<meta name=\"description\" content=\"Explore Magento 2 GraphQL queries for checking extension status and fetching size chart data. Streamline data fetching and improve your ecommerce store!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/plumrocket.com\/learn\/magento-2-graphql\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Guide on Using Magento 2 GraphQL + Query Example\" \/>\n<meta property=\"og:description\" content=\"Explore Magento 2 GraphQL queries for checking extension status and fetching size chart data. Streamline data fetching and improve your ecommerce store!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/learn\/magento-2-graphql\" \/>\n<meta property=\"og:site_name\" content=\"Magento Tutorials for Beginners &amp; Professionals\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-26T09:43:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-02T10:09:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/12\/magento-2-graphql-1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/2228"}],"collection":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/comments?post=2228"}],"version-history":[{"count":14,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/2228\/revisions"}],"predecessor-version":[{"id":2369,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/2228\/revisions\/2369"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/media?parent=2228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/categories?post=2228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/tags?post=2228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}