Scribd Logo
Upload

Welcome to Scribd!

  • 19 views

    Adaptto2021 Playing Headlessly With GraphQL Capabilities in AEM EvgenyTugarev

    Uploaded by

    omar
    This document summarizes a presentation about headless capabilities in Adobe Experience Manager (AEM), including using Content Fragments with GraphQL. Key points include: - AEM provides APIs like Core Components and Assets to deliver content headlessly. Content Fragments are well-suited for multi-channel use and GraphQL. - Content Fragments rely on data models and can have multiple fragments per model. GraphQL solves over- and under-fetching issues by returning exactly what is queried. - AEM supports GraphQL APIs and features including aliases, arguments, fragments, input types, and mutations. Content Fragments are managed as GraphQL assets.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Adaptto2021 Playing Headlessly With GraphQL Capabilities in AEM EvgenyTugarev

    Uploaded by

    omar
    19 views23 pages
    This document summarizes a presentation about headless capabilities in Adobe Experience Manager (AEM), including using Content Fragments with GraphQL. Key points include: - AEM provides APIs like Core Components and Assets to deliver content headlessly. Content Fragments are well-suited for multi-channel use and GraphQL. - Content Fragments rely on data models and can have multiple fragments per model. GraphQL solves over- and under-fetching issues by returning exactly what is queried. - AEM supports GraphQL APIs and features including aliases, arguments, fragments, input types, and mutations. Content Fragments are managed as GraphQL assets.

    Original Description:

    Original Title

    adaptTo2021-Playing-headlessly-with-GraphQL-capabilities-in-AEM-EvgenyTugarev

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document summarizes a presentation about headless capabilities in Adobe Experience Manager (AEM), including using Content Fragments with GraphQL. Key points include: - AEM provides APIs like Core Components and Assets to deliver content headlessly. Content Fragments are well-suited for multi-channel use and GraphQL. - Content Fragments rely on data models and can have multiple fragments per model. GraphQL solves over- and under-fetching issues by returning exactly what is queried. - AEM supports GraphQL APIs and features including aliases, arguments, fragments, input types, and mutations. Content Fragments are managed as GraphQL assets.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    19 views23 pages

    Adaptto2021 Playing Headlessly With GraphQL Capabilities in AEM EvgenyTugarev

    Uploaded by

    omar
    This document summarizes a presentation about headless capabilities in Adobe Experience Manager (AEM), including using Content Fragments with GraphQL. Key points include: - AEM provides APIs like Core Components and Assets to deliver content headlessly. Content Fragments are well-suited for multi-channel use and GraphQL. - Content Fragments rely on data models and can have multiple fragments per model. GraphQL solves over- and under-fetching issues by returning exactly what is queried. - AEM supports GraphQL APIs and features including aliases, arguments, fragments, input types, and mutations. Content Fragments are managed as GraphQL assets.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 23

    EUROPE'S LEADING AEM DEVELOPER CONFERENCE

    27th – 29th SEPTEMBER 2021

    Playing headlessly with GraphQL capabilities in AEM!


    Evgeny Tugarev, Adobe.
    Headless, a new trend?

    2
    Headless capabilities in AEM

    ▪ Headless, what is it?


    ▪ AEM provide different APIs to headlessly
    deliver content:
    ▪ Core Components/Sling Exporter, Assets, …
    ▪ Content Fragments

    3
    Content Fragments & GraphQL

    4
    Content Fragments

    ▪ Content Fragment
    ▪ Rely on a model definition
    ▪ One model - multiple content fragments (1:many)
    ▪ Presentation-agnostic, intended for multi channel
    use
    ▪ Strongly typed, well suited for GraphQL

    5
    Recap on GraphQL

    ▪ Strongly typed, schema based


    ▪ Solves over/under fetch problem, you get
    what you asked for
    ▪ Not a rival to REST

    6
    Sling GraphQL support in AEM

    ▪ Per Sling GraphQL API contract we have to provide


    implementation for
    ▪ SlingSchemaServlet, SlingTypeResolver, SlingDataFetcher
    ▪ Supported features
    ▪ Aliases, Arguments, Fragments, Input types, Introspection, Meta
    fields, Nested fragments, Union types, Variables
    ▪ Mutations
    ▪ Assets HTTP API

    7
    GraphQL Endpoints & configurations

    ▪ Configurations
    ▪ Content Fragment managed as assets
    ▪ Endpoints
    POST POST
    ▪ Divide, conquer /cq:graphql/global/endpoint.json /cq:graphql/adaptto/endpoint.json

    /conf/global /conf/adaptto

    All Content Fragment Models adaptto Fragment Models

    8
    Designing and testing the API

    9
    Content Fragment Model Editor, what’s new?

    ▪ Types
    ▪ Fragment Reference,
    ▪ JSON
    ▪ Child Fragment Reference
    ▪ Attributes
    ▪ Unique, translatable

    10
    Fragment Reference

    ▪ Create graph structure a: {


    b:{
    ▪ Loop detection (link C-A) c:{
    a : null
    Model A }
    }
    Model B c: {
    }
    }
    Model C

    11
    Json

    ▪ A scalar type
    ▪ No filtering
    ▪ Included in query output as is a: {
    ▪ Validated info : {
    “prop1” : “value1”
    “prop2” : [”a”, “b”, “c”]
    Model A }
    }
    info : Json

    12
    From models to GraphQL schema

    ▪ Generated queries
    ▪ ByPath(…), List(…)

    ▪ Generated types
    ▪ ModelResult, ModelResults, ModelFilter

    ▪ Considering a “Speaker” model


    ▪ speakerByPath(_path : String!, _variation: String): SpeakerModelResult!
    ▪ speakerList(filter: SpeakerModelFilter , _variation: String,
    _locale: String): SpeakerModelResults!
    ▪ Duplicated name resolution

    13
    Content Fragment Editor, what’s new?

    ▪ Improved UI
    ▪ Structure tree
    ▪ JSON preview
    ▪ Access to model
    ▪ Nested fragments editing
    ▪ Direct publishing

    14
    Developer workflow

    ▪ Craft your queries with GraphiQL (software


    distribution)
    ▪ Fragment Publishing
    ▪ Underlying Model published
    ▪ All linked Fragments / Models / Assets also published
    ▪ Postman
    ▪ Dev token (dev console)

    15
    Persisted Queries & Performance

    ▪ Persisted queries overview


    ▪ Why do we need them?
    ▪ Performance optimization
    ▪ Structure your API
    ▪ Monitoring – Sling Metrics
    ▪ aem.graphql
    ▪ r

    16
    GraphQL Security

    ▪ Managing access to Content Fragments


    ▪ Secure what needs to be secured
    ▪ Do not install dev tools on production!
    ▪ CORS, CSRF, Referrer Filters

    17
    Consuming output data

    18
    Headless API & WKND Project

    ▪ AEM Headless Client for Javascript


    ▪ https://github.com/adobe/aem-headless-client-js
    ▪ AEM Headless Client for Java
    ▪ https://github.com/adobe/aem-headless-client-java
    ▪ External application, WKND
    ▪ https://github.com/adobe/aem-guides-wknd-graphql

    19
    A conference schedule application

    ▪ Development Plan
    ▪ Use react command line tools to generate application skeleton
    ▪ Add dependencies, create a Schedule component
    ▪ Add styling and Presentation component (pre-built)
    ▪ Improvement Ideas
    ▪ Add authors list
    ▪ Use persisted queries! ☺
    ▪ Application Link
    ▪ https://github.com/etugarev/adapt-to-schedule

    20
    What’s next?

    ▪ Headless UI for Content Fragments


    ▪ Completely new UI
    ▪ React / GraphQL based
    ▪ Schema resilience
    ▪ Content Model Locking

    21
    Resources

    ▪ https://graphql.org/
    ▪ https://one-inside.com/aem-headless-cms/
    ▪ https://www.veriday.com/blog/headless-cms-pros-cons-decoupling/
    ▪ https://adapt.to/2020/en/schedule/graphql-in-apache-sling-but-isnt-it-
    the-opposite-of-rest.html
    ▪ https://sling.apache.org/documentation/bundles/metrics.html
    ▪ https://www.udemy.com/course/react-the-complete-guide-incl-redux/
    ▪ https://www.youtube.com/watch?v=zepOmSsZUjE
    ▪ https://experienceleague.adobe.com/docs/experience-manager-cloud-
    service/headless-journey/developer/overview.html
    22
    Thank you! Q/A

    23

    You might also like