AEM SDK sin encabezado de
AEM AEM El SDK sin encabezado de la aplicación es un conjunto de bibliotecas que los clientes pueden utilizar para interactuar rápida y fácilmente con las API sin encabezado de la aplicación a través de HTTP.
AEM El SDK sin encabezado de la está disponible para varias plataformas:
Consultas persistentes de GraphQL
AEM Realización de consultas mediante GraphQL usando consultas persistentes (en contraposición a consultas de GraphQL definidas por el clienteAEM ) permite a los desarrolladores mantener una consulta (pero no sus resultados) en el formato de datos y, a continuación, solicitar que la consulta se ejecute por su nombre. Las consultas persistentes son similares al concepto de procedimientos almacenados en bases de datos SQL.
Las consultas persistentes tienen un mayor rendimiento que las consultas GraphQL definidas por el cliente, ya que las consultas persistentes se ejecutan mediante la GET AEM HTTP, que puede almacenarse en caché en los niveles CDN y Dispatcher de la red de distribución de contenido (CDN) y de la red de distribución de datos (Dispatcher) de la red de distribución de datos (). Las consultas persistentes también están en vigor, definen una API y desvinculan la necesidad de que el desarrollador comprenda los detalles de cada modelo de fragmento de contenido.
Ejemplos de código persisted-graphql-queries-code-examples
A continuación se muestran ejemplos de código de cómo ejecutar una consulta persistente de GraphQL AEM contra los usuarios de la base de datos de.
Instale el @adobe/aem-headless-client-js ejecutando el npm install
desde la raíz del proyecto Node.js.
code language-none |
---|
|
AEM En este ejemplo de código se muestra cómo realizar consultas en el uso de la función de @adobe/aem-headless-client-js npm module con async/await
sintaxis. AEM El SDK sin encabezado de la aplicación para JavaScript también admite Sintaxis de promesa.
Este código supone una consulta persistente con el nombre wknd/adventureNames
AEM AEM se ha creado en Author y se ha publicado en Publicación de.
code language-javascript |
---|
|
Instale el @adobe/aem-headless-client-js ejecutando el npm install
desde la raíz del proyecto React.
code language-none |
---|
|
Este ejemplo de código muestra cómo utilizar el React useEffect(…) gancho AEM para ejecutar una llamada asíncrona a GraphQL de la.
Uso de useEffect
realizar la llamada asincrónica a GraphQL en React resulta útil porque:
- AEM Proporciona un envoltorio sincrónico para la llamada asincrónica a la red de servicios de soporte de datos de.
- AEM Reduce los problemas de acceso a la innecesariamente.
Este código supone una consulta persistente con el nombre wknd-shared/adventure-by-slug
AEM AEM se ha creado en Author y se ha publicado para publicar en el servicio de publicación de mediante GraphiQL.
code language-javascript |
---|
|
Invocar el React personalizado useEffect
enlace desde cualquier lugar de un componente de React.
code language-javascript |
---|
|
Nuevo useEffect
Se pueden crear vínculos para cada consulta persistente que utilice la aplicación React.
Consultas de GraphQL
AEM El cliente admite consultas de GraphQL AEM definidas por el cliente; sin embargo, es recomendable usar el servicio de consultas con el cliente, aunque es recomendable usar el servicio de consultas con el cliente consultas de GraphQL persistentes.
Webpack 5+
AEM El SDK de JS sin encabezado de la aplicación tiene dependencias en util
que no se incluye en Webpack 5+ de forma predeterminada. Si utiliza Webpack 5+ y recibe el siguiente error:
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 }
Añada lo siguiente devDependencies
a su package.json
archivo:
"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"
},
Entonces ejecute npm install
para instalar las dependencias.