{"id":62964,"date":"2024-07-20T21:07:32","date_gmt":"2024-07-20T15:37:32","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=62964"},"modified":"2024-07-24T16:10:25","modified_gmt":"2024-07-24T10:40:25","slug":"creating-a-basic-custom-graphql-query-in-magento-2","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/creating-a-basic-custom-graphql-query-in-magento-2\/","title":{"rendered":"Building Custom GraphQL Queries for Enhanced Development in Adobe Commerce"},"content":{"rendered":"

Introduction<\/strong><\/h1>\n

Adobe Commerce has embraced GraphQL as a powerful and flexible query language for API development. Creating a custom GraphQL query can benefit your custom module development, enabling you to tailor the data retrieval process to your specific needs. In this blog, we’ll walk you through the steps to create a basic custom GraphQL query in Adobe Commerce.<\/p>\n

Prerequisites<\/h3>\n

Before we start, ensure you have:<\/p>\n

    \n
  • A working Adobe Commerce installation<\/li>\n
  • Basic knowledge of Adobe Commerce module development<\/li>\n
  • Familiarity with GraphQL concepts<\/li>\n<\/ul>\n

    Step 1: Create a Custom Module<\/h3>\n

    First, let’s create a custom module. For this example, we’ll call it GraphqlVendor_GraphQLPlugin<\/strong>.<\/p>\n

      \n
    • Directory Structure:<\/strong><\/li>\n<\/ul>\n
      app\/code\/GraphqlVendor\/GraphQLPlugin\/\r\n\u251c\u2500\u2500 etc\r\n\u2502 \u251c\u2500\u2500 module.xml\r\n\u2502 \u2514\u2500\u2500 schema.graphqls\r\n\u251c\u2500\u2500 registration.php\r\n\u2514\u2500\u2500 Model\r\n    \u2514\u2500\u2500 Resolver\r\n        \u2514\u2500\u2500 CustomData.php<\/pre>\n
        \n
      • registration.php:<\/strong><\/li>\n<\/ul>\n
        \n
        \n
        \n
        <?php\r\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\r\n  \\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,\r\n  'GraphqlVendor_GraphQLPlugin<\/strong>',__DIR__);<\/pre>\n<\/div>\n<\/div>\n<\/div>\n
          \n
        • etc\/module.xml:<\/strong><\/li>\n<\/ul>\n
          \n
          \n
          \n
          <?xml version=\"1.0\"?>\r\n  <configxmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchemainstance\" \r\n  xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\r\n    <module name=\"GraphqlVendor_GraphQLPlugin\" setup_version=\"1.0.0\"\/>\r\n  <\/config><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
          Step 2: Define the GraphQL Schema<\/h3>\n
          Next, we need to define the GraphQL schema for our custom query.<\/p>\n
          etc\/schema.graphqls:<\/strong><\/p>\n
          type Query {\r\n  customData: CustomDataOutput @resolver (class:\"GraphqlVendor\\\\GraphQLPlugin\\\\Model\\\\Resolver\\\\CustomData\")\r\n}\r\n\r\ntype CustomDataOutput {\r\n  message: String\r\n  value: Int\r\n}<\/pre>\n
          Step 3: Create the Resolver<\/h3>\n
          Resolvers are responsible for fetching the data corresponding to a GraphQL query. We’ll create a resolver that returns some custom data.<\/p>\n
          Model\/Resolver\/CustomData.php:<\/strong><\/p>\n
          \n
          \n
          <?php\r\nnamespace GraphqlVendor\\GraphQLPluginModel\\Resolver;\r\n\r\nuse Magento\\Framework\\GraphQl\\Query\\ResolverInterface;\r\nuse Magento\\Framework\\GraphQl\\Schema\\Type\\ResolveInfo;\r\nuse Magento\\Framework\\GraphQl\\Config\\Element\\Field;\r\n\r\nclass CustomData implements ResolverInterface\r\n{\r\n public function resolve(\r\n  Field $field,\r\n  $context,\r\n  ResolveInfo $info,\r\n  array $value = null,\r\n  array $args = null\r\n) {\r\n return [\r\n  'message' => 'Hello from Custom GraphQL!',\r\n  'value' => 42\r\n ];\r\n }\r\n}<\/pre>\n
          Step 4: Run the Module<\/h3>\n
          Enable the module and clear the cache:<\/strong><\/p>\n
          php bin\/magento module:enable GraphqlVendor_GraphQLPlugin\r\nphp bin\/magento setup:upgrade\r\nphp bin\/magento cache:clean<\/pre>\n
          Step 5: Test the Query<\/h3>\n
          You can test your custom GraphQL query using Adobe Commerce GraphQL Playground or any GraphQL client with \/graphql <\/strong>endpoint.<\/p>\n
            \n
          • Query:<\/strong><\/li>\n<\/ul>\n
            If you are using POSTMAN then you can pass the query on body.<\/p>\n
            <\/p>\n
              \n
            • Expected Response:<\/strong><\/li>\n<\/ul>\n
              <\/p>\n
              Conclusion<\/strong><\/h2>\n
              By following the steps outlined in this tutorial, you’ve built a custom GraphQL query in Adobe Commerce. With this setup, you can now create more advanced and tailored queries for your store. Remember, the world of GraphQL with Adobe Commerce is huge & this is just the beginning.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
              Introduction Adobe Commerce has embraced GraphQL as a powerful and flexible query language for API development. Creating a custom GraphQL query can benefit your custom module development, enabling you to tailor the data retrieval process to your specific needs. In this blog, we’ll walk you through the steps to create a basic custom GraphQL query […]<\/p>\n","protected":false},"author":1900,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":44},"categories":[5868],"tags":[5116,6051,5062,911,6116,6133],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/62964"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1900"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=62964"}],"version-history":[{"count":39,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/62964\/revisions"}],"predecessor-version":[{"id":63399,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/62964\/revisions\/63399"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=62964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=62964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=62964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}