Scribd
Upload
112 views25 pages

adaptTo2020-GraphQL-services-in-the-AEM-world-Markus Haack-Mark-J-Becker

This document summarizes a conference about AEM developer tools and GraphQL services. It discusses how GraphQL can be used in AEM projects to retrieve dynamic commerce data. It also provides an overview of the Commerce Integration Framework (CIF) which includes GraphQL-enabled core components and services for integrating AEM with commerce platforms like Magento. The document demonstrates how GraphQL can be used on both the server-side and client-side of AEM projects and includes examples of querying GraphQL from Java and React applications.

Uploaded by

omar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
112 views25 pages

adaptTo2020-GraphQL-services-in-the-AEM-world-Markus Haack-Mark-J-Becker

This document summarizes a conference about AEM developer tools and GraphQL services. It discusses how GraphQL can be used in AEM projects to retrieve dynamic commerce data. It also provides an overview of the Commerce Integration Framework (CIF) which includes GraphQL-enabled core components and services for integrating AEM with commerce platforms like Magento. The document demonstrates how GraphQL can be used on both the server-side and client-side of AEM projects and includes examples of querying GraphQL from Java and React applications.

Uploaded by

omar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

EUROPE'S LEADING AEM DEVELOPER CONFERENCE

28th – 30th SEPTEMBER 2020

GraphQL services in the AEM world


Mark J. Becker, Markus Haack - Adobe
About us

Markus Haack Mark J. Becker


Software Engineer Software Engineer
Adobe Germany Adobe Basel
@mhaack @ markjbecker

2
Agenda

§ Introduction to CIF GraphQL


§ Commerce Core Components
§ GraphQL on
§ Server-side
§ Client-side
§ GraphQL Integration Layer
3
CIF GraphQL

4
Why GraphQL in AEM projects?

Graphic Source: http://twitter.com/NikkitaFTW

5
Commerce Core Components

6
Commerce Integration Framework (CIF)

CIF = +

Core Components for Commerce use cases

7
Commerce Core Components

§ Classic AEM Components using Sling models & HTL templates


§ Focus on commerce use cases
§ Retrieve and display product data, search, catalog navigation – server side
§ Cart & checkout flow, user account – client side

§ GraphQL client linked to AEM site via Sling Context Aware Configuration
§ Flexible mappings & combinations of AEM site (using MSM) to multiple Magento stores

§ CIF Extras:
§ AEM page templates commerce page types
§ SEO helpers for commerce pages

8
Commerce Core Components & GraphQL usage
AEM

Custom Storefront Components

CIF Core CIF Core WCM Core


Components Components Components
(server-side) (client-side)

Specific to
GraphQL data models Magento Schema

GraphQL client Generic

CIF Core Components


package

GraphQL call to Magento

9
Demo
Commerce Core Component Library

10
Server-side GraphQL

12
GraphQL client for all

§ Generic GraphqlClient OSGI service

§ Adapt it from resource, page or get the OSGI service directly

§ CIF provides MagentoGraphqlClient for convenience (configures caching,


HTTP headers, etc. special to Magento)

§ Optional Java GraphQL models


§ generated from any GraphQL schema
§ provided via GitHub for Magento
§ Model class generator is open source as well

13
Usage of GraphQL client

§ With generic GQL queries


query {
products(search: "shirt", sort: { relevance: DESC }) {
items {
id
sku
name
url_key
updated_at
thumbnail {
url
}
}
}
}

14
Usage of GraphQL client

§ With generic GQL queries


String queryStr = "{products(search:\”shirt\",sort:{relevance:DESC})
{items{id,sku,name,url_key,updated_at,thumbnail{url}}}}";

GraphqlResponse<JsonObject, JsonObject> response = graphqlClient.execute(


new GraphqlRequest(queryStr), JsonObject.class, JsonObject.class);

JsonObject query = response.getData();


JsonArray products =
query.getAsJsonObject("products").getAsJsonArray("items");

15
Usage of GraphQL client

§ With model classes


private SimpleProductQueryDefinition generateProductQuery () {
return (SimpleProductQuery q) -> {
q.id().sku().name().urlKey().updatedAt().thumbnail(t -> t.url()));
};
}

String filter = "shirt";


QueryQuery.ProductsArgumentsDefinition searchArgs = s -> s.filter(filter);
ProductsQueryDefinition queryArgs = q -> q.items(generateProductQuery());

GraphqlResponse<Query, Error> response = graphqlClient.execute(query.toString());

Query rootQuery = response.getData();


List<ProductInterface> products = rootQuery.getProducts().getItems();

16
Client-Side GraphQL

18
Client-Side GraphQL

§ Displaying data that is visitor specific, dynamic or


difficult to cache
§ Enhance server-side components
§ React Components with Apollo GraphQL client
§ Full SPA/PWA or mixed page
§ Same Sling CA config as server-side components

19
Declarative Data Fetching

§ Query state managed by Apollo


§ Caching
§ HTTP layer caching (via GET requests)
§ In-Memory caching
§ Mutation can update state
const { data, loading, error } = useQuery(QUERY_GET_CART);
const [addProduct] = useMutation(QUERY_ADD_PRODUCT);

20
Customization with React Context

§ Composition
§ Encapsulate component logic in re-useable
context
const App = () => (
<CartContext>
<MyCart />
</CartContext>);

// MyCart
const [products, { add, remove }] = useCartContext();

21
Demo
React Component Customization

22
GraphQL Integration Layer

24
Serverless GraphQL Server

§ Implement your own GraphQL server to


integrate non-GraphQL services
§ Runs on Apache OpenWhisk
§ Extend, merge or customize existing schemas
§ Schema delegation to split server into multiple
schemas and actions
25
Query Execution

L Commerce
GraphQ
t {
product { produc e
name nam Engine
inventory { }
location
Dispatcher

} Loader
}
Query

inv
ent
or
} loc y {
Loader ati
on

Inventory REST Inventory


Resolver System

26
Q&A

27
References
§ CIF Core Components
https://github.com/adobe/aem-core-cif-components
§ CIF GraphQL Client
https://github.com/adobe/commerce-cif-graphql-client
§ Magento GraphQL data models and query builders
https://github.com/adobe/commerce-cif-magento-graphql
§ GraphQL Java Generator
https://github.com/adobe/graphql-java-generator
§ GraphQL Reference Implementation
https://github.com/adobe/commerce-cif-graphql-integration-reference
§ Venia Reference
https://github.com/adobe/aem-cif-guides-venia
§ Magento GraphQL Schema
https://devdocs.magento.com/guides/v2.4/graphql/
§ Serverless GraphQL on Adobe I/O Runtime (Medium)
https://medium.com/adobetech/serverless-graphql-on-adobe-i-o-runtime-e221d2a8e215

28

You might also like