API sin encabezado de AEM y React

Clone la aplicación desde Github ejecutando el siguiente comando en la línea de comandos.

$ git clone git@github.com:lamontacrook/headless-first.git

Cambie al directorio headless-first e instale las dependencias.

$ cd headless-first
$ npm ci

Cree un archivo con el nombre .env en la raíz del proyecto. En .env establezca los siguientes valores:

REACT_APP_AEM=<URL of the AEM instance>
REACT_APP_ENDPOINT=<the name of the endpoint>
REACT_APP_PROJECT=<the name of the folder with Content Fragments>
REACT_APP_TOKEN=<developer token>

Puede recuperar un token de desarrollador en Cloud Manager. Inicie sesión en Adobe Cloud Manager. Haga clic en Experience Manager > Cloud Manager. Elija el Programa adecuado y, a continuación, haga clic en los puntos suspensivos junto al Entorno.

1. Haga clic en la ficha Integraciones
2. Haga clic en la ficha Token local y obtenga el token de desarrollo local
3. Copie el token de acceso comenzando después de la comillas abiertas hasta antes de la comillas de cierre.
4. Pegue el token copiado como el valor de REACT_APP_TOKEN en el archivo .env.
5. Ahora vamos a crear la aplicación ejecutando npm ci en la línea de comandos.
6. Ahora inicie la aplicación React y ejecute npm run start en la línea de comandos.
7. En ./src/utils un archivo de nombre context.js incluye el código para establecer los valores del archivo .env en el contexto de la aplicación.

Inicie la aplicación React ejecutando npm run start en la línea de comandos.

$ npm run start

La aplicación React se iniciará y abrirá una ventana del explorador a http://localhost:3000. Los cambios en la aplicación React se volverán a cargar automáticamente en el navegador.

Para conectar la aplicación React a AEM as a Cloud Service, vamos a agregar algunas cosas a App.js. En la importación React, agregue useContext.

import React, {useContext} from 'react';

Importar AppContext desde el archivo context.js.

import { AppContext } from './utils/context';

Ahora, en el código de la aplicación, defina una variable de contexto.

const context = useContext(AppContext);

Y finalmente ajuste el código de retorno en <AppContext.Provider> ... </AppContext.Provider>.

...
return(<div className='App'>
    <AppContext.Provider value={context}>
        ...
    </AppContext.Provider>
</div>);

Como referencia, App.js debería ser así.

import React, {useContext} from 'react';
import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './screens/home/home';
import { AppContext } from './utils/context';

const App = () => {
const context = useContext(AppContext);
return (
    <div className='App'>
    <AppContext.Provider value={context}>
        <BrowserRouter>
        <Routes>
            <Route exact={true} path={'/'} element={<Home />} />
        </Routes>
        </BrowserRouter>
    </AppContext.Provider>
    </div>
);
};

export default App;

Importe el SDK AEMHeadless. Esta SDK es una biblioteca de ayuda que la aplicación utiliza para interactuar con las API sin encabezado de AEM.

Agregar esta instrucción de importación a home.js.

import AEMHeadless from '@adobe/aem-headless-client-js';

Agregue el(la) siguiente { useContext, useEffect, useState } a la instrucción de importación React.

import React, { useContext, useEffect, useState } from 'react';

Importar AppContext.

import { AppContext } from '../../utils/context';

Dentro del componente Home, obtenga la variable context de AppContext.

const Home = () => {
const context = useContext(AppContext);
...
}

Inicialice el SDK sin encabezado de AEM dentro de useEffect(), ya que el SDK sin encabezado de AEM debe cambiar cuando cambie la variable context.

useEffect(() => {
const sdk = new AEMHeadless({
    serviceURL: context.url,
    endpoint: context.endpoint,
    auth: context.token
});
}, [context]);

NOTE

Hay un archivo context.js en /utils que está leyendo elementos del archivo .env. Como referencia, context.url es la dirección URL del entorno de AEM as a Cloud Service. context.endpoint es la ruta de acceso completa al extremo creado en la lección anterior. Por último, context.token es el token de desarrollador.

Cree el estado React que expone el contenido proveniente de AEM Headless SDK.

const Home = () => {
const [content, setContent] = useState({});
...
}

Conecte la aplicación a AEM. Utilice la consulta persistente creada en la lección anterior. Vamos a agregar el siguiente código dentro de useEffect después de inicializar AEM Headless SDK. Haga que useEffect dependa de la variable context tal como se ve a continuación.

useEffect(() => {
...
sdk.runPersistedQuery('<name of the endpoint>/<name of the persisted query>', { path: `/content/dam/${context.project}/<name of the teaser fragment>` })
    .then(({ data }) => {
    if (data) {
        setContent(data);
    }
    })
    .catch((error) => {
    console.log(`Error with pure-headless/teaser. ${error.message}`);
    });
}, [context]);

Abra la vista Red de las herramientas del desarrollador para revisar la solicitud de GraphQL.

<url to environment>/graphql/execute.json/pure-headless/teaser%3Bpath%3D%2Fcontent%2Fdam%2Fpure-headless%2Fhero

AEM Headless SDK codifica la solicitud de GraphQL y agrega los parámetros proporcionados. Puede abrir la solicitud en el explorador.

NOTE

Dado que la solicitud va al entorno de creación, debe iniciar sesión en el entorno en otra pestaña del mismo explorador.