{"id":55399,"date":"2022-08-22T15:20:44","date_gmt":"2022-08-22T09:50:44","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=55399"},"modified":"2024-06-10T15:40:15","modified_gmt":"2024-06-10T10:10:15","slug":"graphql-with-headless-cms-aemaacs","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/graphql-with-headless-cms-aemaacs\/","title":{"rendered":"GraphQL with Headless CMS (AEMaaCS)"},"content":{"rendered":"

What is Headless CMS<\/b>\u00a0<\/span><\/h2>\n

CMS consist of Head and Body. Body is where the <\/span>content<\/b> is stored and head is where it is <\/span>presented<\/b>. In Headless CMS the body remains constant i.e. in our case it will be AEM but there is no head, meaning we can decide the head on our own. This does not mean that you don’t want or need a head (presentation), it’s that you get to pick and choose which head\/s you send your body (content) to. It could be one or many.<\/span><\/p>\n

\"\"<\/p>\n

Benefits of Headless CMS<\/b>\u00a0<\/span><\/h2>\n

There are many benefits of using a headless CMS. If you benefit from the below points then you might want to consider using it:<\/span><\/p>\n

    \n
  1. Head (Presentation) can be decided freely.<\/span><\/li>\n
  2. Can use technologies which do not have easy editing of content features.<\/span><\/li>\n
  3. Content developers are not bothered about the presentation layer and vice versa.<\/span><\/li>\n
  4. Wider reach: You can present your content to different platforms which in return target a wider audience.<\/span><\/li>\n
  5. Security : As content and presentation are on different platforms access to those can be well managed and segregated<\/span><\/li>\n
  6. More revenue if you monetise your content.<\/span><\/li>\n
  7. Allows you to build a technology stack that can easily and quickly adapt to future digital experience demands.<\/span><\/li>\n<\/ol>\n

    What is GraphQL <\/b>\u00a0<\/span><\/h2>\n

    GraphQL is a query and manipulation language for APIs. GraphQL is a query language and server-side runtime for APIs that prioritizes giving clients exactly the data they request and no more.\u00a0<\/span><\/p>\n

    Below are some of the basic queries:<\/span><\/p>\n

    \"\"<\/span><\/p>\n

    Configuration to Enable GraphQL on AEMCaaS<\/b>\u00a0<\/span><\/h2>\n

    Make sure you have the below configurations done in order to consume GraphQL:<\/span><\/p>\n

      \n
    1. Go to Tools \u2192 General \u2192 Configuration Browser \u2192 Open properties of your project. Enable content fragment models & GraphQL persistent queries.
      \n<\/span>
      \n<\/span>\"\"<\/li>\n
    2. Go to Tools \u2192 General \u2192 GraphQl.
      \nCreate a new endpoint. Give any name and select your project for which you have done the configuration in the previous step. After creation you will see the endpoint which you will be using for connections.<\/span><\/span><\/li>\n<\/ol>\n

      \"\"<\/p>\n

       <\/p>\n

      3. <\/span> You also need to allo<\/span><\/span>w the endpoint in the CSRF Filter config. As on AEMaaCS you have to write all your configs in your code. Below is the config:<\/span><\/span><\/p>\n

      \"\"<\/h2>\n

      <\/h2>\n

      Creating Content Fragments<\/b>\u00a0<\/span><\/h2>\n

      GraphQL only works with content fragments in AEM. For creating one please follow the steps below:<\/span><\/p>\n

        \n
      1. Go to Tools \u2192 Assets \u2192 Content fragments models (If you don\u2019t have Content Fragments Models here then that means your instance is not cloud sdk. You can find it under Tools \u2192 General).\n

        <\/span><\/li>\n

      2. Create a new model. Open the model in editor mode. You can drag the data types from the right side to the editor pane. <\/span><\/span>You can select different properties like label, placeholder, default value, max length, required, unique, translatable, validation, error message, description etc.
        \n<\/span>
        \n\"\"<\/li>\n
      3. Once you are done creating your model then go to Navigation \u2192 Assets \u2192 Files \u2192 Folder of your project. Open properties of the project folder and allow your model in policies.<\/span><\/span><\/span> \n

        \"\"<\/li>\n

      4. Create a content fragment using your content fragment model.<\/span><\/li>\n<\/ol>\n

        Testing GraphQL Queries<\/b>\u00a0<\/span><\/h2>\n

        You are now all set to use GraphQL to interact with AEM. But we should first test it using the GraphQL query editor. Go to Tools \u2192 General \u2192 GraphQL Query Editor (GQE). If you don\u2019t see the option here then you need to install GraphiQL package from software center. But I would highly recommend having a cloud sdk instance because the GQE which comes with the cloud sdk provides you the option to save and access persistent queries easily. Nevertheless irrespective of what your instance is, all persistent queries are saved at your project configuration folder like:\u00a0 <\/span>\/conf\/ttn-cart-products\/settings\/graphql\/persistentQueries<\/span><\/p>\n

        \"\"<\/p>\n

        On the GQE screen on the top right side of the screen you can select the endpoint on which you want to write queries for.<\/span><\/p>\n

        If you get any error then do make sure you have performed all the steps in the configuration section above.<\/span><\/p>\n

        \"\"<\/p>\n

        In order to pass query parameters you can use Query Variables section<\/span><\/p>\n

        \"\"<\/p>\n

        In order to access this outside AEM you can get the curl request of the queries you create in GQE and implement them using any other technology.<\/span><\/p>\n

        References<\/b>\u00a0<\/span><\/p>\n

          \n
        • https:\/\/experienceleague.adobe.com\/docs\/experience-manager-cloud-service\/content\/headless\/journeys\/developer\/overview.html?lang=en<\/span><\/li>\n
        • https:\/\/www.sanity.io\/blog\/headless-cms-explained<\/span><\/li>\n
        • GraphQL : https:\/\/www.youtube.com\/watch?v=ZQL7tL2S0oQ<\/span><\/li>\n<\/ul>\n

          \u00a0<\/span><\/p>\n

          <\/div>","protected":false},"excerpt":{"rendered":"

          What is Headless CMS\u00a0 CMS consist of Head and Body. Body is where the content is stored and head is where it is presented. In Headless CMS the body remains constant i.e. in our case it will be AEM but there is no head, meaning we can decide the head on our own. This does […]<\/p>\n","protected":false},"author":1470,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":153},"categories":[5868,4308,4488],"tags":[4847,5008,5010,5009],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/55399"}],"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\/1470"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=55399"}],"version-history":[{"count":13,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/55399\/revisions"}],"predecessor-version":[{"id":55429,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/55399\/revisions\/55429"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=55399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=55399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=55399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}