SDK do AEM Headless
O SDK do AEM Headless é um conjunto de bibliotecas que podem ser usadas pelos clientes para interagir rápida e facilmente com APIs do AEM Headless por HTTP.
O SDK do AEM Headless está disponível para várias plataformas:
Consultas persistentes de GraphQL
Consulta ao AEM usando o GraphQL usando consultas persistentes (em vez de consultas do GraphQL definidas pelo cliente) permite que os desenvolvedores criem uma consulta persistente (mas não seus resultados) no AEM e, em seguida, solicitem que a consulta seja executada por nome. As consultas persistentes são semelhantes ao conceito de procedimentos armazenados em bancos de dados SQL.
As consultas persistentes têm melhor desempenho do que as consultas GraphQL definidas pelo cliente, já que as consultas persistentes são executadas usando o HTTP GET, que pode ser armazenado em cache nos níveis de CDN e AEM Dispatcher. As consultas persistentes também estão em vigor, definem uma API e dissociam a necessidade de o desenvolvedor entender os detalhes de cada modelo de fragmento de conteúdo.
Exemplos de código persisted-graphql-queries-code-examples
A seguir estão exemplos de código de como executar uma consulta persistente do GraphQL com AEM.
Instale o @adobe/aem-headless-client-js executando o npm install
da raiz do seu projeto Node.js.
code language-none |
---|
|
Este exemplo de código mostra como consultar AEM usando a variável @adobe/aem-headless-client-js módulo npm usando async/await
sintaxe. O SDK AEM Headless para JavaScript também é compatível Sintaxe de promessa.
Este código presume uma consulta persistente com o nome wknd/adventureNames
foi criado no AEM Author e publicado no AEM Publish.
code language-javascript |
---|
|
Instale o @adobe/aem-headless-client-js executando o npm install
da raiz do seu projeto React.
code language-none |
---|
|
Este exemplo de código mostra como usar a variável React useEffect(…) gancho para executar uma chamada assíncrona para o AEM GraphQL.
Usar useEffect
fazer a chamada assíncrona do GraphQL no React é útil porque:
- Ele fornece wrapper síncrono para a chamada assíncrona ao AEM.
- Reduz o AEM requerendo desnecessariamente.
Este código presume uma consulta persistente com o nome wknd-shared/adventure-by-slug
foi criado no AEM Author e publicado no AEM Publish usando o GraphiQL.
code language-javascript |
---|
|
Chamar o React personalizado useEffect
gancho de outro lugar em um componente React.
code language-javascript |
---|
|
Novo useEffect
ganchos podem ser criados para cada consulta persistente que o aplicativo React usa.
consultas do GraphQL
O AEM oferece suporte a consultas do GraphQL definidas pelo cliente, no entanto, é prática recomendada do AEM usar consultas persistentes do GraphQL.
Webpack 5+
O SDK JS do AEM Headless tem dependências no util
que não está incluído no Webpack 5+ por padrão. Se você estiver usando o Webpack 5+, e receber o seguinte erro:
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 }
Adicione o seguinte devDependencies
ao seu package.json
arquivo:
"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"
},
Em seguida, execute npm install
para instalar as dependências.