Adobe Summit 2022, AEM Session | TW106 - Empower Teams to Do More in Headless Implementation with GraphQL

[kautuk_sahni]

Session Details

Join this session to see how to GraphQL enables teams to create, update & delete content in fragments that can be consumed at scale by the headless implementation. With the rising popularity of the headless approach to content management, the Adobe Experience Manager hybrid content editing capabilities continue to evolve to accommodate. Using the power of GraphQL, developers can enable business users to create, update, and delete structured content in the form of content fragments. Data from these fragments can be consumed efficiently at scale by any headless implementation. Developers or data architects can also work alongside business users to create content fragment models to define the desired data structures. These models contain the necessary information to let developers accurately query and consume the content using GraphQL APIs. Learn how to empower business users to play a vital role on the web team by freeing developers from the work of content updates.

Session Recording

Session Schedule

2022-03-15 | 11:30:00 PST | 60 Mins Duration

Speaker(s)

Benjie Wheeler

Moderator(s)

Adobe Resource(s)

Product(s)

Adobe Audience Manager

Full Schedule

Check Here

Session Q&A

Questio+B1+A1:B28	Answers
GraphQL APIs are available for content fragment only? or also for assets API ?	Content Fragments only.
Is there a high load on the pubs using the GraphQL api? And is it recommended to be on AEMaaCS to implement?	in general API requests are cheaper than a traditional HTML website since you're only sending JSON rather than HTML, css, js. graphQL is available on both 6.5 and AEMaaCS
Do we have inbuilt apollo server or what is the graph QL server?	it's a custom GraphQL Java based implementation we built into AEM.
Shared content between environments is cool. but is there a way to keep them distinct ? if the use-case demands ?	yes - distinction and separation can be controlled by the AEM "context configurations" - along with definition for endpoints to those locations
Shared content between environments is cool. but is there a way to keep them distinct ? if the use-case demands ?	yes!, probably with variations of Content Fragments..
Can graphQL queries be used by an AEM 6.4 instance?	its available from AEM 6.5 only
Can graphQL queries be used by an AEM 6.4 instance?	GraphQL is supported on AEM 6.5.10+ and CS
Can graphQL queries be used by an AEM 6.4 instance?	https://experienceleague.adobe.com/docs/experience-manager-65/release-notes/service-pack/6.5.10.html... <-- 6.5.10 is where the full feature set was fleshed out
Do we have inbuilt apollo server or what is the graph QL server?	for details, see the links referenced at:
Do we have inbuilt apollo server or what is the graph QL server?	for details, see the links referenced at: https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/headless/graphql-ap...
can you set an app as an endpoint?	I guess, Yes. it will be like ... /graphql/endpoint.json.
can you set an app as an endpoint?	endpoints are either global or tied to AEM "contexts"
Is persistence customizable ? i.e. for example, can we customize how long we want to cache to persist before getting fresh data ?	AEM Dispatcher based caching is only used for Persisted Queries (covered at the end). Else - the calls are real time into your AEM server and responses are based on current Published Content Fragment state
Is there a high load on the pubs using the GraphQL api? And is it recommended to be on AEMaaCS to implement?	agreed, I just mean does the api itself take a toll on performance to do all the querying? For example if I have 200 components that have 200 different graphQL queries does the way it queries server side make it take a hit? Also side question is it recommended to create custom indexes for each site, or set of content fragments?
Is there a high load on the pubs using the GraphQL api? And is it recommended to be on AEMaaCS to implement?	just to clarify, graphQL can only be used with content fragments within the DAM and not AEM components on your website. if you are querying a large number of CFs though, i would expect that sooner or later there might be a performance hit, though I'm not sure what those types of limits would be. This would be a good question to ask your implementation parter if you decide to go down this route.
Is there a high load on the pubs using the GraphQL api? And is it recommended to be on AEMaaCS to implement?	The main takeaway is that using graphQL is more performant than doing typical http requests or other methods of extracting data from AEM for other delivery channels.
Is there a high load on the pubs using the GraphQL api? And is it recommended to be on AEMaaCS to implement?	thank you, yeah when I say components, I mean react or some SPA component that makes those POSTs to get the data from the api
When retrieving an image path, is it possible to return svg and png as an ImageRef like it does for jpg instead of being returned as a DocumentRef?	Holliday need to test this to be sure, but the ImageRef is just a reference to an iimage ini the DAM - so any valid image type. in AEM would be usable i believe
any performance considerations that need to be taken into account when implementing this? since all calls are processed by the AEM server I imagine it won't be able to keep up with the load eventually	You are right, like any type of website load can be an issue, but the main point of this is using graphQL API is much cheaper than a traditional restful request. So if you are looking to have cheaper calls to your server, a headless implementation using graphQL is a solid option rather than a traditional html website.
How GraphQL facilitate developers to choose protocols other than HTTP to implement in a server?	in AEM it is always HTTP
Do you show us also POST?	All these requests are POST request unless you build persisted queries. Benjie will cover persisted queries at the end of the session
Is there an approach to using GraphQL in a TypeScript-based React app? Using useGraphQL maybe in conjunction with Generics and generating TS definitions from the GraphQL schema?	ANY application that can make calls over HTTP can be used - the specific example apps we have available are this React app you're seeing, iOS, and an Android app
How to cache my query results?	using Persisted Queries which i cover topically at the end - full details on how to build these are available in the online tutorial section: https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/g...
any performance considerations that need to be taken into account when implementing this? since all calls are processed by the AEM server I imagine it won't be able to keep up with the load eventually	but if I were to implement this as a REST call, it would be cached in dispatcher and AEM would process it once - it sounds like *all* calls are processed by AEM and never cached in dispatcher unless they're persisted queries. I can see how easy it would be for an app making a graphql request to overwhelm AEM given enough traffic. how can we guard against this? is scaling the aem publish-tier the only option?
Is there an approach to using GraphQL in a TypeScript-based React app? Using useGraphQL maybe in conjunction with Generics and generating TS definitions from the GraphQL schema?	What I'm wondering about is: We work in TypeScript not plain JavaScript. So we are looking for a way to represent the GraphQL models in TypeScript as part of our dev setup. E.g. a codegen step which consumes the GraphQL schema and generates TypeScript definition files. Wondering, if there is a proposed setup?
Is it possible to enable CDN caching for AEM GraphQL?	yes, as long as you use persisted queries it can be cached on the CDN
Is it possible to create a mechanism to enable API handshake, that is prior to making the API Call, we need to confirm if the request is coming from a valid source ?	You can use CORS policy to control as well as with valid headers
are there any security specific topics one should think about before enabling and using GraphQL?	yes - AEM security settings applied to the Content Fragments would need to be considered. Also - enabling these requests is part of your AEM CORS config in OSGi
Is it possible to create a mechanism to enable API handshake, that is prior to making the API Call, we need to confirm if the request is coming from a valid source ?	But CORS is at the honor of the client. It can be overridden.
Do we have a sample Angular app consuming the GraphQL endpoint?	no. Sample apps available for React, iOS & Android
Is it possible to create a mechanism to enable API handshake, that is prior to making the API Call, we need to confirm if the request is coming from a valid source ?	https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/headless/security/a...
This app is available at: https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/g...	THere is currently only a React app, android app, and IOS
Links for further reading on GraphicQL ?	https://experienceleague.adobe.com/landing/experience-manager/headless/developer.html?lang=en
Is it possible to create a mechanism to enable API handshake, that is prior to making the API Call, we need to confirm if the request is coming from a valid source ?	right... CORS is not authentication. It is simply recommending what origins the browser does or does not allow. It can be overridden.
Links for further reading on GraphicQL ?	^ start there, many links to both AEM specific and GraphQL general info
Is there also planned a possibility to do persistent query with some kind of suffix feature not only single URL representation?	nothing planned at this point, but concept of using Suffix would be similar to just building multiple persistent Query enpoints

Q&A

Please use this thread to ask the question related to this Session.

Don't forget to register yourself for this session using the registration link shared above.