SDK headless per AEM
L’SDK headless dell’AEM è un set di librerie che possono essere utilizzate dai client per interagire in modo rapido e semplice con le API headless dell’AEM tramite HTTP.
L’SDK headless dell’AEM è disponibile per diverse piattaforme:
Query GraphQL persistenti
Query dell’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, quindi di richiedere che la query venga eseguita 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 può essere memorizzato 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 nei confronti dell’AEM.
Installare @adobe/aem-headless-client-js eseguendo il comando npm install
dalla directory principale del progetto Node.js.
code language-none |
---|
|
Questo esempio di codice mostra come eseguire query sull’AEM utilizzando @adobe/aem-headless-client-js modulo npm tramite async/await
sintassi. L’SDK headless dell’AEM per JavaScript supporta anche Sintassi della promessa.
Questo codice presuppone una query persistente con il nome wknd/adventureNames
è stato creato su AEM Author e pubblicato su AEM Publish.
code language-javascript |
---|
|
Installare @adobe/aem-headless-client-js eseguendo il comando npm install
dalla directory principale del progetto React.
code language-none |
---|
|
Questo esempio di codice mostra come utilizzare il React useEffect(…) gancio per eseguire una chiamata asincrona al GraphQL AEM.
Utilizzo di useEffect
per effettuare la chiamata GraphQL asincrona in React è utile perché:
- Fornisce il wrapper sincrono per la chiamata asincrona all'AEM.
- Riduce l’AEM che richiede inutilmente.
Questo codice presuppone una query persistente con il nome wknd-shared/adventure-by-slug
è stato creato su AEM Author e pubblicato su AEM Publish utilizzando GraphiQL.
code language-javascript |
---|
|
Richiama React personalizzato useEffect
aggancio da un’altra posizione in un componente React.
code language-javascript |
---|
|
Nuovo useEffect
È possibile creare hook per ogni query persistente utilizzata dall’app React.
Query GraphQL
AEM supporta le query GraphQL definite dal client, tuttavia è consigliabile utilizzare AEM query GraphQL persistenti.
Webpack 5+
L’SDK JS per AEM headless dipende da util
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 quanto segue devDependencies
al tuo package.json
file:
"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"
},
Quindi esegui npm install
per installare le dipendenze.