AEM Headless SDK
AEM Headless SDK è un set di librerie che possono essere utilizzate dai client per interagire in modo rapido e semplice con le API AEM Headless tramite HTTP.
AEM Headless SDK è disponibile per varie piattaforme:
Query GraphQL persistenti
L'esecuzione di query in AEM tramite GraphQL tramite query persistenti (anziché query GraphQL definite dal client) consente agli sviluppatori di rendere persistente una query (ma non i relativi risultati) in AEM e quindi di richiedere l'esecuzione della query per nome. Le query persistenti sono simili al concetto di stored procedure nei database SQL.
Le query persistenti sono più performanti delle query GraphQL definite dal client, in quanto vengono eseguite utilizzando HTTP GET, che è possibile memorizzare nella cache ai livelli CDN e AEM Dispatcher. Anche le query persistenti diventano effettive, definiscono un’API e riducono la necessità per lo sviluppatore di comprendere i dettagli di ciascun modello per frammenti di contenuto.
Esempi di codice persisted-graphql-queries-code-examples
Di seguito sono riportati alcuni esempi di codice per l’esecuzione di una query persistente di GraphQL su AEM.
Installa @adobe/aem-headless-client-js eseguendo il comando npm install
dalla radice del progetto Node.js.
code language-none |
---|
|
In questo esempio di codice viene illustrato come eseguire query in AEM utilizzando il modulo npm @adobe/aem-headless-client-js utilizzando la sintassi async/await
. AEM Headless SDK per JavaScript supporta anche la sintassi Promise.
Questo codice presuppone che una query persistente con il nome wknd/adventureNames
sia stata creata in AEM Author e pubblicata in AEM Publish.
code language-javascript |
---|
|
Installa @adobe/aem-headless-client-js eseguendo il comando npm install
dalla radice del progetto React.
code language-none |
---|
|
In questo esempio di codice viene illustrato come utilizzare l'hook React useEffect(…) per eseguire una chiamata asincrona ad AEM GraphQL.
L'utilizzo di useEffect
per effettuare la chiamata GraphQL asincrona in React è utile perché:
- Fornisce il wrapper sincrono per la chiamata asincrona ad AEM.
- Riduce la necessità di richiedere inutilmente AEM.
Questo codice presuppone che una query persistente con il nome wknd-shared/adventure-by-slug
sia stata creata in AEM Author e pubblicata in AEM Publish utilizzando GraphiQL.
code language-javascript |
---|
|
Richiama l'hook React useEffect
personalizzato da un'altra posizione in un componente React.
code language-javascript |
---|
|
È possibile creare nuovi hook di useEffect
per ogni query persistente utilizzata dall'app React.
Query GraphQL
AEM supporta le query GraphQL definite dal client, tuttavia è consigliabile utilizzare query GraphQL persistenti in AEM.
Webpack 5+
AEM Headless JS SDK ha dipendenze da util
che non è incluso in Webpack 5+ per impostazione predefinita. Se utilizzi Webpack 5+ e ricevi il seguente errore:
Compiled with problems:
× ERROR in ./node_modules/@adobe/aio-lib-core-errors/src/AioCoreSDKErrorWrapper.js 12:13-28
Module not found: Error: Can't resolve 'util' in '/Users/me/Code/wknd-headless-examples/node_modules/@adobe/aio-lib-core-errors/src'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
Aggiungi devDependencies
seguente al file package.json
:
"devDependencies": {
"buffer": "npm:buffer@^6.0.3",
"crypto": "npm:crypto-browserify@^3.12.0",
"http": "npm:stream-http@^3.2.0",
"https": "npm:https-browserify@^1.0.0",
"stream": "npm:stream-browserify@^3.0.0",
"util": "npm:util@^0.12.5",
"zlib": "npm:browserify-zlib@^0.2.0"
},
Eseguire quindi npm install
per installare le dipendenze.